/**
 * VZDUCH.co | Core Design System
 * Premium, minimal, performance-first
 */

.noscript-warning {
    padding: 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body.modal-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

ul {
    list-style: none;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.section-title[data-accent="sand"] {
    --accent-color: #d5bdaf;
}

.section-title[data-accent="blue"] {
    --accent-color: #9eb3c2;
}

.section-title[data-accent="olive"] {
    --accent-color: #a3ad91;
}

/* Služby Title Treatment - Editorial */

.title-services-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.title-services {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.reveal.is-visible .title-decoration {
    transform: scaleX(1);
}

.reveal:not(.is-visible) .title-decoration {
    transform: scaleX(0);
}

/* Background Atmosphere */

.atmosphere-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: cover;
    background-position: center;
    opacity: var(--bg-atmosphere-opacity);
    filter: grayscale(100%);
    transition: opacity 2s ease;
}

.atmosphere-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 0%, var(--bg) 100%),
        linear-gradient(to bottom, transparent 40%, var(--bg) 95%);
}

/* Layout */

.container {
    max-width: var(--layout-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    width: 100%;
}

/* Header */

.nav a {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav a:hover {
    color: var(--text);
}

/* Hero */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: clamp(8rem, 15vw, 12rem);
    padding-bottom: clamp(4rem, 10vw, 6rem);
}

.hero-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-width: 600px;
    height: 60vw;
    max-height: 600px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    animation: shapeMorph 15s ease-in-out infinite alternate;
}

@keyframes shapeMorph {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    50% {
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
        transform: translate(-48%, -52%) rotate(10deg) scale(1.05);
    }

    100% {
        border-radius: 50% 50% 60% 40% / 60% 40% 50% 60%;
        transform: translate(-52%, -48%) rotate(-5deg) scale(0.95);
    }
}

.hero-scroll {
    position: absolute;
    bottom: 0rem;
    left: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    opacity: 0.6;
}

.scroll-text {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    color: var(--muted);
    display: flex;
    gap: 2px;
}

.scroll-text span {
    animation: textPulse 2s infinite var(--ease-premium);
    animation-delay: calc(var(--char-index, 0) * 0.05s);
}

.scroll-text span:nth-child(1) {
    --char-index: 1;
}

.scroll-text span:nth-child(2) {
    --char-index: 2;
}

.scroll-text span:nth-child(3) {
    --char-index: 3;
}

.scroll-text span:nth-child(4) {
    --char-index: 4;
}

.scroll-text span:nth-child(5) {
    --char-index: 5;
}

.scroll-text span:nth-child(6) {
    --char-index: 6;
}

.scroll-text span:nth-child(7) {
    --char-index: 7;
}

.scroll-text span:nth-child(8) {
    --char-index: 8;
}

.scroll-text span:nth-child(9) {
    --char-index: 9;
}

.scroll-text span:nth-child(10) {
    --char-index: 10;
}

.scroll-text span:nth-child(11) {
    --char-index: 11;
}

.scroll-text span:nth-child(12) {
    --char-index: 12;
}

.scroll-text span:nth-child(13) {
    --char-index: 13;
}

.scroll-text span:nth-child(14) {
    --char-index: 14;
}

.scroll-text span:nth-child(15) {
    --char-index: 15;
}

.scroll-text span:nth-child(16) {
    --char-index: 16;
}

.scroll-text span:nth-child(17) {
    --char-index: 17;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--muted), transparent);
    animation: linePulse 2s infinite var(--ease-premium);
}

@keyframes textPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(2px);
        color: var(--text);
    }
}

@keyframes linePulse {

    0%,
    100% {
        transform: scaleY(0.8);
        opacity: 0.4;
        transform-origin: top;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
        transform-origin: top;
    }
}

/* Reveal Animations */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 1.2s var(--ease-premium), opacity 1.2s var(--ease-premium);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: transform 1.4s var(--ease-premium), opacity 1.4s var(--ease-premium);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Cursor Glow - Desktop Only */

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

@media (pointer: fine) {
    body:hover .cursor-glow {
        opacity: 1;
    }
}

/* Services */

.service-item:last-child {
    border-bottom: 1px solid var(--line);
}

/* Service sections — each with its own top border tint and collapsed background shade */

.service--body {
    --service-accent: #8d9fae;
    /* cool slate-gray, no teal */
    border-left-color: rgba(141, 159, 174, 0.22);
    border-top-color: rgba(141, 159, 174, 0.20) !important;
}

.service--body:not(:has(.service-header[aria-expanded="true"])) {
    background: linear-gradient(135deg,
            rgba(141, 159, 174, 0.04) 0%,
            transparent 60%) !important;
}

.service--photo,
.service--image {
    --service-accent: #8c9eb5;
    /* dusty lavender-blue */
    border-left-color: rgba(140, 158, 181, 0.22);
    border-top-color: rgba(140, 158, 181, 0.20) !important;
}

.service--photo:not(:has(.service-header[aria-expanded="true"])),
.service--image:not(:has(.service-header[aria-expanded="true"])) {
    background: linear-gradient(135deg,
            rgba(140, 158, 181, 0.045) 0%,
            transparent 60%) !important;
}

.service--brand {
    --service-accent: #8da0af;
    /* neutral steel-gray */
    border-left-color: rgba(141, 160, 175, 0.22);
    border-top-color: rgba(141, 160, 175, 0.18) !important;
}

.service--brand:not(:has(.service-header[aria-expanded="true"])) {
    background: linear-gradient(135deg,
            rgba(141, 160, 175, 0.035) 0%,
            transparent 60%) !important;
}

.service-title-group .section-kicker {
    margin-bottom: 0.5rem;
}

.service-item h3 {
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: color var(--transition-fast), transform 0.8s var(--ease-premium);
    margin-bottom: 0.25rem;
}

.service-item:hover .service-header-subtitle {
    opacity: 0.7;
}

.service-header[aria-expanded="true"] .service-header-subtitle {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.plus-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--line);
    position: relative;
    transition: var(--transition-med);
    background: transparent;
    z-index: 2;
    flex-shrink: 0;
    margin-left: 2rem;
}

.plus-btn::before,
.plus-btn::after {
    content: '';
    position: absolute;
    background-color: var(--text);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition-med);
}

.plus-btn::before {
    width: 16px;
    height: 1.5px;
}

.plus-btn::after {
    width: 1.5px;
    height: 16px;
}

.service-header[aria-expanded="true"] .plus-btn {
    transform: rotate(45deg);
    border-color: var(--text);
    background: var(--text);
}

.service-header[aria-expanded="true"] .plus-btn::before,
.service-header[aria-expanded="true"] .plus-btn::after {
    background-color: var(--bg);
}

.service-header:hover .plus-btn {
    border-color: var(--service-accent);
    transform: scale(1.05);
}

/* Service Content */

.service-description {
    display: flex;
    flex-direction: column;
}

.service-description p {
    font-size: 1.15rem;
    color: var(--muted-strong);
    margin-bottom: 3.5rem;
    line-height: 1.7;
    max-width: 55ch;
}

/* Detail Chips / Tags */

.service-tags {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tag-header {
    width: 100%;
    text-align: left;
    padding: 1.25rem 1.75rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-fast);
}

.tag-icon {
    font-size: 1rem;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.tag-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s var(--ease-premium);
}

.service-tag.is-open::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, var(--tag-accent, transparent), transparent 70%);
    opacity: 0.05;
    pointer-events: none;
}

.service-tag.is-open .tag-icon {
    transform: rotate(45deg);
    color: var(--tag-accent, var(--text));
}

@media (max-width: 991px) {
    .service-details {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .service-visual {
        order: -1;
        max-width: 500px;
    }
}

/* Projects - Compact & Minimal Editorial Index */

@media (max-width: 1280px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-info {
    padding: 0;
    position: relative;
}

/* Proof Section - Quiet Cards */

.proof-item h4 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.15rem 2.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--text);
    border-radius: 4px;
    transition: transform 0.6s var(--ease-premium), background 0.6s ease, color 0.6s ease, border-color 0.6s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transition: left 0.7s var(--ease-premium);
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    background: transparent;
    color: var(--text);
    transform: translateY(-3px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}

.btn-secondary:hover {
    background: var(--card);
    border-color: var(--text);
}

/* Footer */

.footer {
    width: 100%;
    margin-top: 5rem;
}

.footer-inner {
    display: flex;
    justify-content: center;
    text-align: center;
}

.footer-cta .section-kicker {
    margin-bottom: 2rem;
}

.footer-2 {
    padding: 3rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

.footer-bottom-inner p a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-bottom-inner p a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.contact-page {
    background-color: var(--bg);
}

.contact-hero {
    min-height: 80vh;
    padding-top: 180px;
}

.contact-content {
    display: flex;
    flex-direction: column;
}

/* Contact Info List — consistent 2-col grid */

/* Label — unified across all 4 items */

.info-label {
    display: block;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-bottom: 0.6rem;
    opacity: 0.8;
}

/* Value — unified across all 4 items */

/* Anchor values (Instagram etc.) */

.info-value a,
.info-value span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--text);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    display: inline-block;
    border-bottom: 1px solid transparent;
}

.info-value a:hover {
    color: var(--muted-strong);
    border-bottom-color: var(--line);
}

/* Clickable reveal wrapper */

.contact-obfuscated {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
    transition: border-color var(--transition-fast), color var(--transition-fast);
    outline: none;
    background: none;
    padding: 0;
    text-align: left;
}

.contact-obfuscated:hover,
.contact-obfuscated:focus-visible {
    color: var(--muted-strong);
    border-bottom-color: var(--text);
}

/* The •• dots within the obfuscated span */

.reveal-hint {
    color: var(--muted);
    font-size: 0.9em;
    letter-spacing: 0.1em;
    margin: 0 0.05em;
    opacity: 0.6;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.contact-obfuscated:hover .reveal-hint {
    color: var(--text);
    opacity: 1;
}

/* Revealed anchor link inside info-value */

.contact-revealed {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--text);
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid var(--line);
    transition: color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
    animation: contactReveal 0.4s var(--ease-premium) forwards;
}

.contact-revealed:hover {
    color: var(--muted-strong);
    border-bottom-color: var(--text);
}

.info-value.is-revealed .contact-revealed {
    animation: contactReveal 0.35s var(--ease-premium) forwards;
}

@keyframes contactReveal {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------
   Contact Helper Message (micro-toast)
   Appears below info-item after first reveal click
----------------------------------------------- */

.contact-helper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-helper.is-fading {
    opacity: 0;
    transform: translateY(-3px);
}

/* CTA buttons area */

/* Contact back link */

.contact-back:hover {
    color: var(--text);
}

/* Responsiveness */

/* Reduced Motion */

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

    .reveal,
    .reveal-left,
    .project-card,
    .btn {
        transition: opacity 0.3s ease !important;
        transform: none !important;
    }

    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}

/* =========================================================
   FINAL VZDUCH POLISH OVERRIDES
   Keep this block at the end. It intentionally overrides
   earlier iterations without removing original code.
========================================================= */

.page-atmosphere::after {
    content: '';
    position: absolute;
    inset: -15%;
    background: radial-gradient(circle at 70% 42%, var(--page-section-wash), transparent 42%),
        radial-gradient(circle at 28% 68%, rgba(255, 255, 255, 0.025), transparent 38%);
    opacity: 0.75;
    transition: background 1.5s var(--ease-premium), opacity 1.5s var(--ease-premium);
}

.container,
.header-inner,
.footer-2 .container {
    width: min(calc(100% - (var(--gutter) * 2)), var(--layout-max));
    max-width: var(--layout-max);
    padding-inline: 0;
    margin-inline: auto;
}

.logo,
.nav a {
    line-height: 1;
}

.section-heading .section-title,
.section--services .section-title,
.section--proof .section-title,
.section--projects .section-title {
    color: var(--text);
}

.section--services {
    --accent-color: var(--accent-sand);
    --section-accent: var(--accent-sand);
}

.section--projects {
    --accent-color: var(--accent-olive);
    --section-accent: var(--accent-olive);
}

.service-item:hover,
.service-item:has(.service-header[aria-expanded="true"]) {
    background: rgba(255, 255, 255, 0.025);
    border-left-color: var(--service-accent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--service-accent) 54%, transparent);
}

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

.service-actions .btn {
    min-width: 150px;
}

/* Contact page: CTA buttons are intentionally hidden for now.
   Do not remove the related HTML/JS block. Re-enable later by removing
   this CSS rule or by adding a more specific visible class. */

.contact-page .service-actions,
.contact-page .contact-actions {
    display: none !important;
}

/* Hero signature animation */

.hero-desc {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 400;
    color: var(--muted);
    max-width: 48ch;
    line-height: 1.6;
    margin-inline: auto;
    margin-top: 0;
}

/* Projects — premium medallions / project index */

.project-img-wrapper::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--project-accent) 38%, transparent);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}

.project-card:hover .project-img-wrapper::before {
    opacity: 1;
    transform: scale(1);
}

.project-img-wrapper.is-missing .project-symbol {
    opacity: 0.78;
}

.project-img-wrapper.is-missing {
    background: radial-gradient(circle at 60% 35%, color-mix(in srgb, var(--project-accent) 24%, transparent), transparent 54%),
        rgba(255, 255, 255, 0.035);
}

.project-meta {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    opacity: 0.8;
    margin-top: 0.4rem;
}

.project-desc {
    font-size: clamp(0.93rem, 1vw, 1rem);
    color: var(--muted-strong);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 30ch;
    margin-inline: auto;
}

/* Footer final CTA */

.footer-1 {
    padding: 12rem 0;
    border-top: 0px solid rgb(194 205 214 / 54%);
    background: linear-gradient(to bottom, transparent 0%, rgb(13 15 20 / 60%) 25%, rgb(10 12 16 / 86%) 55%, #07080c 100%) !important;
    padding-block: clamp(7rem, 10vw, 10rem);
}

.footer-2 {
    background: #07080c !important;
    border-top: 1px solid rgba(100, 130, 155, 0.10);
}

.footer-2 .container,
.footer-bottom-inner {
    width: 100%;
}

/* Contact portrait helper if contact.php uses .contact-visual img */

@media (max-width: 1200px) {
    /* Let clamp handle it */

    .container,
    .header-inner,
    .footer-2 .container {
        width: min(calc(100% - 56px), var(--layout-max));
    }

    .service-item {
        padding-inline: clamp(1.2rem, 4vw, 3rem);
    }
}

/* =========================================================
   FINAL COMPILED PATCH — theme system, spacing, services,
   section atmosphere, projects, contact, footer, side nav
   ========================================================= */

body {
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    --page-section-wash: rgba(255, 255, 255, 0.018);
    transition: background-color 0.6s var(--ease-premium), color 0.6s var(--ease-premium);
}

body[data-section-accent="sand"] {
    --page-section-wash: rgba(213, 189, 175, 0.12);
    --section-wash: #d5bdaf;
}

body[data-section-accent="blue"] {
    --page-section-wash: rgba(158, 179, 194, 0.12);
    --section-wash: #9eb3c2;
}

body[data-section-accent="olive"] {
    --page-section-wash: rgba(163, 173, 145, 0.12);
    --section-wash: #a3ad91;
}

.container,
.header-inner,
.footer .container {
    width: var(--safe-width);
    max-width: var(--layout-max);
    margin-inline: auto;
    padding-inline: 0;
}

/* Theme toggle in header */

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--text);
    outline: none;
}

[data-theme-icon] {
    font-size: 0.9rem;
    line-height: 1;
    transform: translateY(-0.02em);
}

/* Header / secondary side navigation */

.scroll-top {
    position: fixed;
    right: clamp(18px, 3vw, 42px);
    bottom: clamp(18px, 3vw, 42px);
    z-index: 996;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    color: var(--text);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    backdrop-filter: blur(10px);
}

.scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover {
    border-color: var(--text);
    transform: translateY(-3px);
}

/* Section headings: centered, single underline, ambient color instead of colored title text */

.section-title,
.section--services .section-title,
.section--proof .section-title,
.section--projects .section-title {
    color: var(--text);
}

.title-decoration {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 1px;
    background: var(--text);
    transform-origin: left;
    transition: transform 1.2s var(--ease-premium);
    transition-delay: 0.5s;
    display: none !important;
}

.section-heading::before {
    content: '';
    position: absolute;
    z-index: -3;
    inset: 50% auto auto 50%;
    width: min(760px, 80vw);
    height: min(380px, 42vw);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-color, #d5bdaf) 22%, transparent), transparent 62%);
    opacity: 0.18;
    filter: blur(38px);
    pointer-events: none;
}

.section--services .section-title {
    color: var(--text) !important;
    --accent-color: #d5bdaf;
}

.section--proof .section-title {
    color: var(--text) !important;
    --accent-color: #9eb3c2;
}

.section--projects .section-title {
    color: var(--text) !important;
    --accent-color: #a3ad91;
}

html[data-theme="dark"] .section--services .section-title,
html[data-theme="dark"] .section--projects .section-title,
html[data-theme="dark"] .section--proof .section-title {
    color: #ffffff !important;
}

.section--services .section-subtitle {
    color: color-mix(in srgb, #8da0af 65%, var(--muted)) !important;
}

.section--projects .section-subtitle {
    color: var(--accent-olive) !important;
}

.section--proof .section-subtitle {
    color: var(--accent-blue) !important;
}

.service-item h3 {
    color: #ffffff !important;
    transition: color 0.5s var(--ease-premium), transform 0.8s var(--ease-premium);
}

html[data-theme="light"] .service-item h3 {
    color: var(--text) !important;
}

.service-item:has(.service-header[aria-expanded="true"]) h3 {
    color: var(--service-accent) !important;
}

.project-title {
    color: #ffffff !important;
}

.proof-item h4 {
    color: #ffffff !important;
}

.section--services .section-heading::before {
    --accent-color: #8da0af;
    /* muted steel gray — neutral bridge across all three service tones */
}

.section--proof .section-heading::before {
    --accent-color: #9eb3c2;
}

.section--projects .section-heading::before {
    --accent-color: #a3ad91;
}

/* Service sub-category accent underlines */
.service--photo .section-heading::before,
.service--photo .title-services::after {
    --accent-color: #8c9eb5;
}

.service--brand .section-heading::before,
.service--brand .title-services::after {
    --accent-color: #8da0af;
}

/* Services: refined panel system, inner field, soft ambient opening */

.service-item::after {
    display: none;
}

.service-item:hover::before,
.service-item:has(.service-header[aria-expanded="true"])::before {
    opacity: 1;
}

.service-header[aria-expanded="true"] {
    padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
    border-left-color: var(--service-accent);
    padding: clamp(2.8rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem) 1.4rem;
}

.service-title-group {
    display: flex;
    flex-direction: column;
    pointer-events: none;
    max-width: min(72ch, 100%);
}

.service-content.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
}

.service-details {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: start;
}

.service-tag,
.project-img-wrapper,
.proof-item,
.project-card,
.contact-visual {
    border-radius: 8px;
}

/* Projects as compact medallions with public link */

.project-card:hover .project-public-link {
    color: var(--text);
}

.project-link-indicator {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    transition: width 0.6s var(--ease-premium), background 0.6s ease;
    margin-inline: auto;
    margin-top: 1.7rem;
}

.project-card:hover .project-link-indicator {
    width: 80px;
    background: linear-gradient(90deg, transparent, var(--text), transparent);
}

/* Contact CTA buttons are intentionally hidden for now.
   Do not remove the buttons from contact.php. Re-enable later by removing
   this rule or adding a more specific visible class. */

.contact-page .service-actions,
.contact-actions.is-hidden-temporary,
.contact-cta-actions.is-hidden-temporary {
    display: none !important;
}

.info-value {
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.2;
    display: block;
    min-height: 1.5em;
    position: relative;
    text-wrap: balance;
}

.contact-info-item:last-child .info-value {
    max-width: 22ch;
}

/* Footer text: less line-breaking, still responsive */

/* Light theme adjustments */

html[data-theme="light"] .btn {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

html[data-theme="light"] .btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="light"] .modal-overlay {
    background: rgba(243, 240, 234, 0.94);
}

html[data-theme="light"] .service-visual img,
html[data-theme="light"] .project-img {
    filter: grayscale(0.35) contrast(0.98);
}

html[data-theme="light"] .atmosphere-overlay {
    background: radial-gradient(circle at 50% 50%, transparent 0%, var(--bg) 96%),
        linear-gradient(to bottom, transparent 40%, var(--bg) 95%);
}

/* =========================================================
   FINAL MICRO-POLISH PATCH — 2026-05-17
   Fixes: theme tone, section fades, dotted atmosphere,
   mobile scroll indicator, side nav, services, footer/contact.
   ========================================================= */

/* Smoother global section wash — no hard horizontal cuts. */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--section-wash, var(--accent-sand)) 12%, transparent), transparent 42%),
        radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--section-wash, var(--accent-sand)) 5%, transparent), transparent 48%);
    opacity: 0.36;
    transition: background 0.9s var(--ease-premium), opacity 0.9s var(--ease-premium);
}

html[data-theme="dark"] body::before {
    opacity: 0.28;
}

/* Section ambient + dotted layered texture. It fades in with JS and expands while scrolling. */

.section--services::before,
.section--proof::before,
.section--projects::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 18%, color-mix(in srgb, var(--section-accent) 13%, transparent), transparent 42%),
        radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--section-accent) 7%, transparent), transparent 56%);
    opacity: 0.64;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
}

.section--services::after,
.section--proof::after,
.section--projects::after {
    content: '';
    position: absolute;
    inset: clamp(0.5rem, 2vw, 2rem) 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--section-dots-opacity, 0);
    transform: scale(var(--section-dots-scale, 1));
    transform-origin: center;
    transition: opacity 0.45s var(--ease-premium), transform 0.18s linear;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--section-accent) 28%, transparent) 0 1px, transparent 1.35px),
        radial-gradient(circle, color-mix(in srgb, var(--text) 15%, transparent) 0 0.8px, transparent 1.25px);
    background-size: 26px 26px, 64px 64px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.62) 34%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.62) 34%, transparent 72%);
}

html[data-theme="dark"] .section--services::after,
html[data-theme="dark"] .section--proof::after,
html[data-theme="dark"] .section--projects::after {
    opacity: calc(var(--section-dots-opacity, 0) * 0.52);
}

html[data-theme="light"] .section--services::after,
html[data-theme="light"] .section--proof::after,
html[data-theme="light"] .section--projects::after {
    opacity: calc(var(--section-dots-opacity, 0) * 0.78);
}

/* Section headings stay centered on every viewport. */

.section-title[data-accent]::after,
.title-decoration {
    left: 50% !important;
    transform: translateX(-50%) scaleX(1) !important;
    width: clamp(68px, 9vw, 132px);
    height: 1px;
    opacity: 0.72;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color) 76%, var(--text)), transparent) !important;
}

/* Prevent accidental double underline in the Services title. */

.title-services-wrapper .title-decoration {
    display: none !important;
}

/* Light mode: restore subtle editorial dash feeling without extra noisy lines. */

html[data-theme="light"] .section-title[data-accent]::after {
    box-shadow: 0 10px 0 -0.5px color-mix(in srgb, var(--accent-color) 24%, transparent),
        0 -10px 0 -0.5px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

/* Services: more readable inner field, smoother colored panel, no sharp ambient edge. */

.services-grid {
    margin-top: clamp(3.75rem, 7vw, 6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.service-item::before {
    content: '';
    position: absolute;
    inset: -8% -6%;
    pointer-events: none;
    background: radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--service-accent, #d5bdaf) 18%, transparent), transparent 40%),
        linear-gradient(90deg, color-mix(in srgb, var(--service-accent, #d5bdaf) 7%, transparent), transparent 68%);
    opacity: 0;
    transition: opacity 0.7s var(--ease-premium);
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 84%, transparent 100%);
    filter: blur(0.15px);
}

html[data-theme="dark"] .service-item:has(.service-header[aria-expanded="true"]) {
    background: radial-gradient(ellipse at 84% 26%, color-mix(in srgb, var(--service-accent) 22%, transparent), transparent 52%),
        linear-gradient(90deg, color-mix(in srgb, var(--service-accent) 10%, transparent), transparent 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 98%);
}

.service-item:not(:has(.service-header[aria-expanded="true"])) .service-header {
    padding: clamp(1.75rem, 4vw, 2.8rem) clamp(1.25rem, 4vw, 3rem);
    min-height: clamp(190px, 22vw, 310px);
    padding-top: clamp(2.2rem, 4.8vw, 3.6rem);
    padding-bottom: clamp(2.2rem, 4.8vw, 3.6rem);
}

.service-item:not(:has(.service-header[aria-expanded="true"])) h3 {
    font-size: clamp(2.15rem, 5.6vw, 4.2rem);
}

.service-item:not(:has(.service-header[aria-expanded="true"])) .service-header-subtitle {
    max-width: 38ch;
    opacity: 0.36;
}

/* Better tag accent colors/intensity across both themes. */

.service-tag {
    background: transparent;
    border: 1px solid var(--line-soft);
    border-left: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition-med);
    position: relative;
    border-color: color-mix(in srgb, var(--line) 85%, transparent);
}

.service-tag.is-open {
    background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--tag-accent) 12%, transparent), transparent 55%),
        color-mix(in srgb, var(--panel) 54%, transparent);
    border-color: var(--line);
    border-left-color: color-mix(in srgb, var(--tag-accent) 86%, var(--text));
}

html[data-theme="light"] .service-tag.is-open {
    background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--tag-accent) 16%, transparent), transparent 54%),
        rgba(255, 255, 255, 0.36);
}

/* Footer: wider line length and less awkward wrapping. */

.footer-cta {
    max-width: 980px;
    padding-inline: 0;
    margin-inline: auto;
}

/* Header and side nav visual polish. */

html[data-theme="dark"] .side-nav a {
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
}

/* Mobile hero scroll indicator: centered and horizontal to avoid text overlap. */

/* =========================================================
   V3 precision fixes — mobile polish, contact, proof dots,
   side navigation, hero diagram and soft fades.
   ========================================================= */

/* Softer global wash with no hard section cuts. */

.section {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: clip;
    border-top: 0 !important;
    isolation: isolate;
    background: transparent !important;
}

.section::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%) !important;
}

/* Dotted atmosphere only belongs to the VIZE / proof section. */

/* Clearer but still soft mini-lines around section headings and cards. */

.section-title[data-accent]::after {
    content: '';
    position: absolute;
    bottom: -1.15rem;
    left: 50%;
    width: min(170px, 34vw);
    height: 1px !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-color) 82%, var(--text)), transparent) !important;
    opacity: 0.9 !important;
    transform: translateX(-50%);
}

.proof-item::before,
.project-link-indicator {
    opacity: 0.72 !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--item-accent, var(--text)) 64%, var(--text)), transparent) !important;
}

/* Side navigation: no pill buttons, more like a quiet typographic rail. */

.side-nav a::before {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    width: 1px;
    height: 0;
    background: var(--text);
    opacity: 0.7;
    transform: translateY(-50%);
    transition: height 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}

.side-nav a:hover,
.side-nav a:focus-visible {
    color: var(--text) !important;
    border-color: var(--line);
    outline: none;
}

.side-nav a:hover::before,
.side-nav a:focus-visible::before {
    height: 28px;
}

/* Hero: keep text composition clean and use a very subtle tattoo/diagram style canvas. */

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
    isolation: isolate;
}

html[data-theme="dark"] .hero-signature-canvas {
    opacity: 0.16 !important;
}

/* Keep scroll-to-explore like desktop, only centered on small devices. */

/* Services: remove hard shadows/lines and keep open panels soft. */

.service-item {
    border-top: 1px solid var(--line);
    border-left: 3px solid transparent;
    padding: 0;
    position: relative;
    transition: background 0.6s var(--ease-premium), border-left-color 0.6s var(--ease-premium);
    margin-inline: auto;
    width: min(100%, 1180px);
    max-width: 1180px;
    padding-inline: clamp(1.25rem, 4vw, 4rem);
    border-left-width: 0;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--line-soft);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 76%, transparent), transparent 98%);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: none !important;
}

/* Contact page cleanup: no big headline, photo controlled, helper close to value. */

.contact-page .contact-content>h1,
.contact-page .contact-content>.contact-title,
.contact-page .contact-content>.section-title,
.contact-page .contact-content>.hero-title {
    display: none !important;
}

.contact-page .contact-content>.section-kicker {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.contact-back {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    transition: color var(--transition-fast);
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

@media (max-width: 992px) {
    :root {
        --section-padding: 6rem;
    }

    .service-visual img {
        aspect-ratio: 16/9;
    }

    .section-heading {
        text-align: left;
        margin-bottom: clamp(3rem, 7vw, 5rem);
    }

    .section-heading .section-kicker,
    .section-heading .section-subtitle {
        margin-inline: 0;
    }

    .section-title[data-accent]::after,
    .title-decoration {
        left: 0;
        transform: none;
    }

    .section-title::before {
        left: 0;
        transform: translateY(var(--parallax-y, 0));
        max-width: 100%;
        font-size: 1.5em;
        opacity: 0.028;
    }

    .service-details {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .service-visual {
        order: -1;
        width: min(100%, 620px);
        aspect-ratio: 16/10;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: start;
    }

    .contact-visual {
        order: -1;
        justify-self: start !important;
        max-width: min(250px, 62vw) !important;
        margin-bottom: clamp(2rem, 8vw, 3.5rem);
    }

    .contact-visual img {
        max-height: 280px !important;
    }
}

/* Mobile section cards should not collide with right-side utilities. */

/* Gallery modal: keep light theme clean, but avoid hard color blocks. */

.modal-content {
    background: radial-gradient(ellipse at 50% 18%, color-mix(in srgb, var(--bg) 92%, transparent), transparent 58%);
}

/* Footer text final polish */

.footer-cta h2 {
    font-size: clamp(2rem, 4.6vw, 4rem);
    margin-bottom: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.08;
    word-break: keep-all;
    max-width: 19ch !important;
    margin-inline: auto;
    text-wrap: balance;
}

/* =========================================================
   V4 requested polish — private projects, centered section system,
   stable rail nav, light-theme warmth and mobile service state.
   ========================================================= */

/* Keep room for the right-side navigation on tablet / narrow desktop. */

@media (min-width: 721px) and (max-width: 1380px) {

    body:has(.side-nav.is-visible) .container,
    body:has(.side-nav.is-visible) .header-inner {
        max-width: min(var(--layout-max), calc(100vw - clamp(118px, 12vw, 170px))) !important;
    }
}

/* Header/nav ordering polish and a bit more stable line-up. */

/* Hero: remove the technical canvas lines and replace them with clean human intro text. */

.hero-signature-canvas {
    display: none !important;
    width: min(520px, 76vw) !important;
    height: clamp(54px, 8vw, 92px) !important;
    margin: clamp(-0.45rem, -0.6vw, -0.1rem) auto clamp(0.75rem, 1.5vw, 1.25rem) !important;
    opacity: 0.2 !important;
    mix-blend-mode: normal !important;
    pointer-events: none;
}

.hero-content .section-kicker {
    margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}

/* More visible but still restrained large background words. */

html[data-theme="dark"] .section-title::before {
    opacity: 0.07 !important;
}

/* Keep main section headers centered on all devices. */

.section-title {
    font-size: clamp(2.2rem, 7vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-break: keep-all;
    position: relative;
    display: inline-block;
    text-align: center !important;
}

/* Scroll to explore: preserve desktop vertical style, center it on smaller screens. */

/* Project section: now a private-project index with 3 logo cards. */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(2.8rem, 5vw, 5.8rem) !important;
    margin-top: 5rem;
    max-width: 1040px !important;
    margin-inline: auto;
    align-items: start;
    justify-items: center;
}

.project-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0.25rem 0;
    transition: transform 0.8s var(--ease-premium);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    text-align: center !important;
    min-width: 0;
    width: 100%;
    max-width: 285px;
}

.project-title {
    font-size: clamp(1.45rem, 2.15vw, 2rem) !important;
    font-weight: 700;
    text-transform: none !important;
    margin-bottom: 0.85rem;
    letter-spacing: -0.03em;
    line-height: 1;
}

.project-public-link {
    display: inline-block;
    justify-content: center;
    margin-top: 0.85rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color var(--transition-fast);
}

@media (max-width: 840px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
        max-width: 460px !important;
    }
}

/* Proof/VIZE dots: stronger, but always below the cards. */

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 4rem;
    z-index: 3 !important;
}

/* Mobile: all service cards start compact; JS removes the default open panel. */

/* Slightly stronger service color when opened, without harsh edges. */

/* =========================================================
   V5 precision fixes — responsive text, projects logos,
   contact mobile, proof dots and cleaner side nav.
   ========================================================= */

/* Prevent decorative layers from affecting layout/width. */

.section,
.section-heading,
.title-services-wrapper {
    max-width: 100%;
}

.section-heading .section-subtitle {
    width: min(100%, 54ch) !important;
    max-width: min(54ch, calc(100vw - 48px)) !important;
    text-align: center !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Only the proof/vize section gets the animated dot field. */

.section--services::after,
.section--projects::after {
    display: none !important;
    content: none !important;
}

/* Avoid hard visual seams from service/media glow. */

.service-item,
.service-content-inner,
.service-visual,
.contact-visual,
.project-img-wrapper {
    box-shadow: none !important;
}

.service-item:has(.service-header[aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--service-accent) 38%, var(--line));
    background: radial-gradient(ellipse at 82% 30%, color-mix(in srgb, var(--service-accent) 28%, transparent), transparent 62%),
        radial-gradient(ellipse at 22% 88%, color-mix(in srgb, var(--service-accent) 13%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 72%, transparent), transparent 112%) !important;
    overflow: hidden;
}

.service-item:has(.service-header[aria-expanded="true"])::before {
    opacity: 0.48 !important;
    background: radial-gradient(ellipse at 84% 28%, color-mix(in srgb, var(--service-accent) 19%, transparent), transparent 52%),
        radial-gradient(ellipse at 35% 76%, color-mix(in srgb, var(--service-accent) 8%, transparent), transparent 58%);
    filter: blur(18px) !important;
    inset: -22% -18% !important;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.50) 48%, transparent 86%) !important;
    mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.50) 48%, transparent 86%) !important;
}

/* Closed service rows stay compact; opened panel remains as designed. */

.service-header[aria-expanded="false"] {
    padding-block: clamp(2rem, 5vw, 3.2rem) !important;
}

.service-header[aria-expanded="false"] .service-title-group {
    max-width: min(700px, 78vw) !important;
}

.service-header[aria-expanded="false"] h3 {
    font-size: clamp(2.25rem, 6.2vw, 4rem) !important;
}

.service-header[aria-expanded="false"] .service-header-subtitle {
    opacity: 0.52 !important;
    transform: translateY(0);
    max-width: 60ch !important;
}

/* Project section subtitle should simply read "projekty". */

.section--projects .section-kicker::after {
    content: none !important;
    opacity: 0.62;
}

/* Projects: logos only, no framed boxes. */

html[data-theme="dark"] {
    --bg: #0A0A0A;
    --text: #F5F5F5;
    --muted: #888888;
    --muted-strong: #B8B8B8;
    --line: rgba(255, 255, 255, 0.12);
    --line-soft: rgba(255, 255, 255, 0.07);
    --card: rgba(255, 255, 255, 0.04);
    --card-hover: rgba(255, 255, 255, 0.07);
    --accent: #FFFFFF;
    --panel: rgba(255, 255, 255, 0.035);
    --panel-strong: rgba(255, 255, 255, 0.055);
    --signature-rgb: 245, 245, 245;
    --bg-atmosphere-opacity: 0.08;
    color-scheme: dark;
    --accent-sand: #d7b79f;
    --accent-blue: #98b4c8;
    --accent-olive: #a8b989;
    --accent-clay: #e4c1ad;
    --project-logo-filter: brightness(0) invert(1) contrast(1.08);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #e9e8e4;
    --text: #101010;
    --muted: #6a6762;
    --muted-strong: #302f2b;
    --line: rgba(0, 0, 0, 0.13);
    --line-soft: rgba(0, 0, 0, 0.075);
    --card: rgba(0, 0, 0, 0.035);
    --card-hover: rgba(0, 0, 0, 0.055);
    --panel: rgba(255, 255, 255, 0.31);
    --panel-strong: rgba(255, 255, 255, 0.5);
    --signature-rgb: 16, 16, 16;
    --project-logo-filter: brightness(0) contrast(1.08);
}

html[data-theme="dark"] body {
    background: linear-gradient(to bottom,
            #0A0A0A 0%,
            #0A0A0A 6%,
            color-mix(in srgb, var(--accent-sand) 4.5%, #0A0A0A) 22%,
            color-mix(in srgb, var(--accent-olive) 4.5%, #0A0A0A) 52%,
            color-mix(in srgb, var(--accent-blue) 4.5%, #0A0A0A) 80%,
            #0A0A0A 100%) !important;
    background-attachment: scroll !important;
}

html[data-theme="light"] body {
    background: linear-gradient(to bottom,
            #e9e8e4 0%,
            #e9e8e4 6%,
            color-mix(in srgb, var(--accent-sand) 6%, #e9e8e4) 22%,
            color-mix(in srgb, var(--accent-olive) 6%, #e9e8e4) 52%,
            color-mix(in srgb, var(--accent-blue) 6%, #e9e8e4) 80%,
            #e9e8e4 100%) !important;
    background-attachment: scroll !important;
}

/* Contact: minimalist layout, no heading label, tighter helper and better mobile photo flow. */

.contact-page .contact-content>.section-kicker,
.contact-page .contact-title,
.contact-page .hero-title,
.contact-page .section-title {
    display: none !important;
}

.contact-helper {
    display: inline-block;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-top: 0.25rem !important;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
    pointer-events: none;
    line-height: 1.4;
    white-space: normal !important;
    max-width: 28ch;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 8rem;
    align-items: center !important;
    max-width: var(--layout-max);
    margin-inline: auto;
    width: var(--safe-width);
}

/* Right side navigation: typographic rail instead of pill buttons. */

.side-nav::before {
    content: '';
    display: block;
    width: 1px;
    height: 54px;
    margin-inline: auto;
    background: linear-gradient(to bottom, transparent, var(--line), transparent);
}

.side-nav a:hover,
.side-nav a.is-active {
    color: var(--text) !important;
}

.side-nav a:last-child::after {
    display: none;
}

/* Scroll to explore: keep the vertical design, center it on narrow screens. */

/* =========================================================
   V6 final interaction/layout fixes
   - multi-open services (JS), stable service subtitle
   - header menu visible on mobile, no logo
   - project logos back in black boxes
   - proof dots centered to proof section and behind cards
   ========================================================= */

/* Header: HOME is the brand anchor now, so the VZDUCH wordmark is removed from markup. */

.header.header--hidden {
    transform: none !important;
}

.logo {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: none !important;
}

.theme-toggle-mobile {
    display: none !important;
}

.nav a,
.theme-toggle {
    font-size: clamp(0.66rem, 0.78vw, 0.78rem) !important;
}

/* On mobile the menu stays visible at top and scrolls horizontally if needed. */

@media (max-width: 820px) {
    .header {
        padding: 0.78rem 0 !important;
        background: color-mix(in srgb, var(--bg) 86%, transparent) !important;
        backdrop-filter: blur(18px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent) !important;
    }

    .header-inner {
        width: min(100% - 20px, var(--layout-max)) !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .nav {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav::-webkit-scrollbar {
        display: none !important;
    }

    .nav ul {
        width: max-content !important;
        min-width: 100% !important;
        justify-content: flex-start !important;
        gap: clamp(1.05rem, 5vw, 1.75rem) !important;
        padding-inline: 0.15rem 0.75rem !important;
    }

    .nav a,
    .theme-toggle {
        font-size: 0.65rem !important;
        letter-spacing: 0.18em !important;
    }

    .side-nav {
        display: none !important;
    }
}

/* =========================================================
   V30 — service navigator, quieter proof grid and ambient flow
   ========================================================= */

.ambient-flow-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.9s ease;
    -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 18%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 2%, #000 18%, #000 78%, transparent 100%);
}

body[data-section-accent] .ambient-flow-canvas {
    opacity: 0;
}

.contact-page .ambient-flow-canvas {
    opacity: 0.78;
}

.service-switcher {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
    width: 100%;
    margin-top: clamp(3rem, 6vw, 5.5rem);
}

.service-switcher-card {
    --service-accent: #98a9b7;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    min-height: clamp(220px, 22vw, 292px);
    padding: clamp(1.25rem, 2.2vw, 1.9rem);
    overflow: hidden;
    color: var(--text);
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--service-accent) 20%, var(--line));
    border-radius: clamp(14px, 1.4vw, 20px);
    background:
        radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--service-accent) 15%, transparent), transparent 43%),
        linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 86%, transparent), color-mix(in srgb, var(--panel) 35%, transparent));
    box-shadow: none;
    transition:
        transform 0.45s var(--ease-premium),
        border-color 0.4s ease,
        background 0.4s ease;
}

.service-switcher-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto -12% -48% 22%;
    height: 72%;
    border-radius: 50%;
    opacity: 0.3;
    background: radial-gradient(circle, color-mix(in srgb, var(--service-accent) 30%, transparent), transparent 68%);
    filter: blur(12px);
    transition: transform 0.7s var(--ease-premium), opacity 0.45s ease;
}

.service-switcher-card::after {
    content: '';
    position: absolute;
    left: clamp(1.25rem, 2.2vw, 1.9rem);
    right: clamp(1.25rem, 2.2vw, 1.9rem);
    bottom: 0;
    height: 2px;
    opacity: 0.42;
    transform: scaleX(0.22);
    transform-origin: left;
    background: linear-gradient(90deg, var(--service-accent), transparent);
    transition: transform 0.6s var(--ease-premium), opacity 0.4s ease;
}

.service-switcher-card:hover,
.service-switcher-card:focus-visible,
.service-switcher-card.is-active {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--service-accent) 58%, var(--line));
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--service-accent) 22%, transparent), transparent 47%),
        linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 100%, transparent), color-mix(in srgb, var(--panel) 56%, transparent));
}

.service-switcher-card:hover::before,
.service-switcher-card:focus-visible::before,
.service-switcher-card.is-active::before {
    opacity: 0.54;
    transform: translate3d(-5%, -7%, 0) scale(1.08);
}

.service-switcher-card:hover::after,
.service-switcher-card:focus-visible::after,
.service-switcher-card.is-active::after {
    opacity: 0.9;
    transform: scaleX(1);
}

.service-switcher-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--service-accent) 72%, var(--text));
    outline-offset: 4px;
}

.service-switcher-card.is-active .service-switcher-icon {
    transform: rotate(180deg);
}

.service-switcher-number {
    justify-self: end;
    grid-column: 2;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, var(--service-accent) 72%, var(--muted));
}

.service-switcher-copy {
    align-self: center;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.service-switcher-copy .section-kicker {
    margin: 0;
    color: var(--muted);
    font-size: 0.58rem;
}

.service-switcher-title {
    font-size: clamp(2rem, 4.2vw, 4rem);
    font-weight: 750;
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.service-switcher-action {
    align-self: end;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-switcher-icon {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--service-accent) 36%, var(--line));
    border-radius: 50%;
    color: var(--text);
    font-size: 0.9rem;
    transition: transform 0.55s var(--ease-premium), background 0.35s ease;
}

.service-switcher-card:hover .service-switcher-icon,
.service-switcher-card.is-active .service-switcher-icon {
    background: color-mix(in srgb, var(--service-accent) 14%, transparent);
}

.service-panels {
    width: 100%;
    margin-top: clamp(1rem, 2.2vw, 1.8rem);
}

.service-panel[hidden] {
    display: none !important;
}

.service-panel.service-item {
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--service-accent) 26%, var(--line)) !important;
    border-radius: clamp(16px, 1.6vw, 24px) !important;
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--service-accent) 14%, transparent), transparent 42%),
        linear-gradient(155deg, color-mix(in srgb, var(--panel-strong) 88%, transparent), color-mix(in srgb, var(--panel) 40%, transparent)) !important;
    animation: service-panel-in 0.55s var(--ease-premium) both;
}

.service-panels .service-panel[hidden] {
    display: none !important;
}

.service-panel.service-item::before {
    content: '';
    position: absolute;
    inset: -18% -10% auto 54% !important;
    display: block !important;
    height: 52%;
    opacity: 0.28 !important;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--service-accent) 27%, transparent), transparent 70%) !important;
    filter: blur(18px) !important;
}

.service-panel.service-item::after {
    display: none !important;
}

@keyframes service-panel-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-panel-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.72fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.4rem, 4vw, 4rem) clamp(1.6rem, 3vw, 2.6rem);
    border-bottom: 1px solid var(--line-soft);
}

.service-panel .service-title-group {
    max-width: none;
}

.service-panel .service-title-group h3 {
    margin: 0.45rem 0 0.8rem;
    font-size: clamp(3.25rem, 8vw, 7.6rem);
    line-height: 0.84;
    letter-spacing: -0.055em;
}

.service-panel .service-header-subtitle {
    max-width: 52ch !important;
    margin: 0 !important;
    color: var(--muted);
    opacity: 0.86;
    font-size: clamp(0.82rem, 1.15vw, 1rem);
    line-height: 1.55;
}

.service-panel-intro {
    position: relative;
    display: grid;
    gap: 1.5rem;
    align-items: end;
}

.service-panel-intro > p {
    max-width: 48ch;
    margin: 0;
    color: var(--muted-strong);
    font-size: clamp(0.96rem, 1.2vw, 1.08rem);
    line-height: 1.7;
}

.service-panel-close {
    justify-self: start;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.service-panel-close span:last-child {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 400;
    transition: transform 0.35s ease, border-color 0.35s ease;
}

.service-panel-close:hover span:last-child,
.service-panel-close:focus-visible span:last-child {
    transform: rotate(90deg);
    border-color: var(--service-accent);
}

.service-panel-close:focus-visible {
    outline: 2px solid var(--service-accent);
    outline-offset: 5px;
}

.service-panel .service-content,
.service-panel .service-content.is-open {
    display: block !important;
    grid-template-rows: 1fr !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.service-panel .service-content-inner,
.service-panel .service-content.is-open .service-content-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(1.8rem, 4vw, 3.8rem) clamp(1.4rem, 4vw, 4rem) clamp(2.4rem, 5vw, 4.5rem) !important;
    opacity: 1 !important;
    transform: none !important;
}

.service-panel .service-details {
    grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.72fr);
    gap: clamp(2rem, 6vw, 6.5rem);
}

.service-panel .service-description {
    min-width: 0;
}

.service-panel .service-tags {
    gap: 0.2rem !important;
}

.service-panel .service-tag {
    border-top: 1px solid var(--line-soft) !important;
}

.service-panel .service-tag:last-child {
    border-bottom: 1px solid var(--line-soft) !important;
}

.service-panel .service-tag .tag-header {
    min-height: 58px;
}

.service-panel .service-visual {
    margin-top: 0.3rem;
}

.proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

@media (max-width: 900px) {
    .service-panel-heading,
    .service-panel .service-details {
        grid-template-columns: 1fr;
    }

    .service-panel-heading {
        gap: 1.6rem;
    }

    .service-panel-intro {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .service-switcher {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 2.7rem;
    }

    .service-switcher-card {
        min-height: 154px;
        padding: 1.15rem 1.2rem;
        grid-template-rows: auto 1fr;
    }

    .service-switcher-copy {
        align-self: end;
        grid-column: 1;
        gap: 0.45rem;
        padding-right: 3rem;
    }

    .service-switcher-title {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .service-switcher-action {
        position: absolute;
        right: 1.15rem;
        bottom: 1.05rem;
        padding: 0;
    }

    .service-switcher-action > span:first-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .service-panel-heading {
        padding: 1.7rem 1.2rem 1.5rem;
    }

    .service-panel .service-title-group h3 {
        font-size: clamp(3rem, 18vw, 4.7rem);
    }

    .service-panel-intro {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-panel .service-content-inner {
        padding: 1.25rem 1.2rem 2.3rem !important;
    }

    .service-panel .service-tag .tag-header {
        min-height: 54px;
        padding-block: 0.8rem !important;
    }

    .proof-grid {
        grid-template-columns: 1fr !important;
    }

    .ambient-flow-canvas {
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-switcher-card,
    .service-panel {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   V28 — compact service overview, conversion details, calmer atmosphere
   ========================================================= */

.services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.services-grid .service-item {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
}

.services-grid .service-item:has(.service-header[aria-expanded="true"]) {
    grid-column: 1 / -1;
}

.services-grid .service-header[aria-expanded="false"] {
    min-height: clamp(150px, 14vw, 190px) !important;
    padding: clamp(1.35rem, 2.6vw, 2rem) !important;
}

.services-grid .service-header[aria-expanded="false"] h3 {
    font-size: clamp(2rem, 3.8vw, 3.35rem) !important;
    line-height: 0.96;
}

.services-grid .service-header[aria-expanded="false"] .service-header-subtitle {
    max-width: 34ch !important;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    line-height: 1.45;
}

.services-grid .service-header[aria-expanded="false"] .section-kicker {
    font-size: 0.58rem;
}

.services-grid .service-header[aria-expanded="false"] .plus-btn {
    width: 50px;
    height: 50px;
}

html[data-theme="dark"] .services-grid .service-item:not(:has(.service-header[aria-expanded="true"])) {
    background:
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--service-accent) 10%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)) !important;
}

html[data-theme="dark"] body[data-section-accent="sand"] .atmosphere-overlay::after {
    opacity: 0.62;
}

html[data-theme="dark"] body[data-section-accent="olive"] .atmosphere-overlay::before {
    opacity: 0.55;
}

html[data-theme="dark"] body[data-section-accent="blue"] .page-atmosphere::before {
    opacity: 0.44;
}

body[data-section-accent="sand"] .section--services::before,
body[data-section-accent="olive"] .section--projects::before,
body[data-section-accent="blue"] .section--proof::before {
    opacity: 0.07 !important;
}

.portfolio-detail-page .portfolio-header {
    padding: 1rem 0;
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.97), rgba(8, 9, 11, 0.84), rgba(8, 9, 11, 0)) !important;
}

.portfolio-header .detail-modal-actions {
    gap: 0.75rem !important;
}

.portfolio-header .detail-modal-back,
.portfolio-header .detail-modal-cta {
    min-height: 44px !important;
    padding: 0 1.15rem !important;
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
}

.portfolio-header .detail-modal-back {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.portfolio-header .detail-modal-cta {
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    background: #f5f5f3 !important;
    color: #0a0a0a !important;
}

.portfolio-header .detail-modal-back::after,
.portfolio-header .detail-modal-cta::after {
    display: none !important;
}

.portfolio-header .detail-modal-back:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.portfolio-header .detail-modal-cta:hover {
    background: #ffffff !important;
    color: #000000 !important;
    transform: translateY(-1px);
}

.detail-hero-kicker {
    display: block;
    margin-bottom: 1.2rem;
    color: var(--portfolio-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.detail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.detail-primary-action,
.detail-secondary-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.detail-primary-action {
    background: var(--portfolio-text);
    color: var(--portfolio-bg);
    border: 1px solid var(--portfolio-text);
}

.detail-secondary-action {
    color: var(--portfolio-text);
    border: 1px solid var(--portfolio-border);
    background: transparent;
}

.detail-primary-action:hover,
.detail-secondary-action:hover {
    transform: translateY(-2px);
}

.detail-secondary-action:hover {
    border-color: color-mix(in srgb, var(--portfolio-text) 45%, transparent);
}

.detail-story-card {
    padding: clamp(2rem, 5vw, 4.5rem) !important;
    border: 1px solid var(--portfolio-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--portfolio-accent) 12%, transparent), transparent 45%),
        rgba(255, 255, 255, 0.018);
}

.detail-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 7rem);
}

.detail-outcome-grid article {
    min-height: 170px;
    padding: 1.5rem;
    border: 1px solid var(--portfolio-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.018);
}

.detail-outcome-grid article > span {
    display: block;
    margin-bottom: 2.5rem;
    color: var(--portfolio-accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.detail-outcome-grid article p {
    max-width: 28ch;
    color: var(--portfolio-text);
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    line-height: 1.55;
}

html[data-theme="light"] .portfolio-header .detail-modal-cta {
    background: #151515 !important;
    color: #f7f6f2 !important;
    border-color: #151515 !important;
}

html[data-theme="light"] .portfolio-header .detail-modal-back {
    border-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 820px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-grid .service-item:has(.service-header[aria-expanded="true"]) {
        grid-column: auto;
    }

    .services-grid .service-header[aria-expanded="false"] {
        min-height: 142px !important;
        padding: 1.25rem !important;
    }

    .services-grid .service-header[aria-expanded="false"] h3 {
        font-size: clamp(2rem, 11vw, 3rem) !important;
    }

    .services-grid .service-header[aria-expanded="false"] .plus-btn {
        width: 44px;
        height: 44px;
    }

    .portfolio-detail-page .portfolio-header-inner {
        padding-inline: 1rem !important;
    }

    .portfolio-header .detail-modal-actions {
        gap: 0.45rem !important;
    }

    .portfolio-header .detail-modal-back,
    .portfolio-header .detail-modal-cta {
        padding-inline: 0.9rem !important;
        font-size: 0.6rem !important;
    }

    .detail-theme-toggle {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    .detail-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-primary-action,
    .detail-secondary-action {
        width: 100%;
    }

    .detail-outcome-grid {
        grid-template-columns: 1fr;
    }

    .detail-outcome-grid article {
        min-height: 0;
    }
}

/* Desktop/tablet: keep room for the right rail by narrowing content slightly. */

@media (min-width: 821px) and (max-width: 1380px) {

    .container,
    .header-inner,
    .footer .container,
    .contact-layout {
        width: min(calc(100% - clamp(92px, 10vw, 142px)), var(--layout-max)) !important;
    }
}

/* Services heading subtitle: never drift right, never overflow mobile. */

.section--services .section-heading,
.section--services .title-services-wrapper,
.section--services .section-subtitle {
    margin-inline: auto !important;
    text-align: center !important;
    max-width: min(100%, calc(100vw - 40px)) !important;
    box-sizing: border-box !important;
}

/* Services can stay opened together. Visual state remains controlled. */

.service-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.58s cubic-bezier(.22, .61, .36, 1), opacity 0.35s ease !important;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.service-content:not(.is-open) .service-content-inner,
.service-header[aria-expanded="false"]+.service-content .service-content-inner {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}

.service-content.is-open .service-content-inner {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Project logos: framed black logo blocks with white marks, optically balanced. */

.project-card:hover .project-img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.02) !important;
}

.project-card:nth-child(1):hover .project-img {
    transform: scale(1.11) !important;
}

.project-card:nth-child(2):hover .project-img {
    transform: scale(0.96) !important;
}

.project-card:nth-child(3):hover .project-img {
    transform: scale(0.98) !important;
}

.project-symbol {
    position: absolute;
    inset: 0;
    display: none !important;
    place-items: center;
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text);
    opacity: 0;
    z-index: 0;
}

/* Proof dots: only in VIZE, centered to that section and always below cards. */

.section--proof {
    --accent-color: var(--accent-blue);
    --section-accent: var(--accent-blue);
    isolation: isolate !important;
    position: relative !important;
}

.section--proof .section-heading,
.proof-grid,
.proof-item {
    position: relative !important;
    z-index: 2 !important;
}

/* Scroll indicator: vertical everywhere, centered on mobile. */

/* =========================================================
   V7 precision fixes
   - scroll indicator keeps exact desktop styling, only repositions
   - top navigation only on small screens; right rail on desktop/tablet
   - icon-only theme toggle + Instagram icon
   - robust section subtitles
   - VIZE dots removed
   - project logo boxes optically balanced
   ========================================================= */

/* Section subtitles: never overflow or get clipped, even beside right rail. */

.section-heading,
.section-heading-inner,
.title-services-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.section-title,
.section-title::before,
.title-services::before {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Header: desktop/tablet uses the side rail only. Small devices get centered top menu. */

.logo,
.theme-toggle-mobile {
    display: none !important;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted) !important;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    padding: 0 !important;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.nav-icon-link::after {
    display: none !important;
}

/* Scroll to explore: identical desktop construction; on small screens only move from left to center. */

/* Remove dotted VIZE field entirely. */

.section--proof::after,
.section--proof::before {
    background-image: none !important;
}

.section--proof::after {
    display: none !important;
    inset: 14% 6% 10% !important;
    z-index: 0 !important;
    opacity: 0 !important;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--section-accent) 62%, transparent) 0 1.35px, transparent 1.85px),
        radial-gradient(circle, color-mix(in srgb, var(--text) 34%, transparent) 0 0.9px, transparent 1.35px) !important;
    background-size: 28px 28px, 68px 68px !important;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .48) 42%, transparent 78%) !important;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .48) 42%, transparent 78%) !important;
    content: none !important;
    position: absolute !important;
    transform: scale(var(--section-dots-scale, 1)) !important;
    transform-origin: 50% 50% !important;
    background-position: center center !important;
    pointer-events: none !important;
}

.proof-grid,
.proof-item {
    position: relative !important;
    z-index: 2 !important;
}

/* Project logo boxes: equal width and stronger Vzduch.art presence. */

.project-card:nth-child(1) .project-img {
    transform: scale(1.06) !important;
}

.project-card:nth-child(2) .project-img {
    transform: scale(0.78) !important;
}

.project-card:nth-child(3) .project-img {
    transform: scale(1.34) !important;
}

.project-card:hover:nth-child(1) .project-img {
    transform: scale(1.09) !important;
}

.project-card:hover:nth-child(2) .project-img {
    transform: scale(0.82) !important;
}

.project-card:hover:nth-child(3) .project-img {
    transform: scale(1.38) !important;
}

/* =========================================================
   V8 final system polish
   - desktop header visible at top, side rail after scroll
   - icon alignment/order support
   - unified section micro-typography
   - proof hover glow
   - contact image = clean radius only
   - safer subtitles across side rail / mobile
   ========================================================= */

/* Global heading micro-copy system */

.section-kicker,
.section-heading .section-kicker,
.service-title-group .section-kicker,
.project-meta,
.info-label {
    font-size: clamp(0.58rem, 0.62vw, 0.72rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.34em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

.section-subtitle,
.service-header-subtitle {
    font-size: clamp(0.98rem, 1.35vw, 1.2rem) !important;
    line-height: 1.55 !important;
    color: var(--muted) !important;
    text-align: center !important;
}

/* Robust section subtitle containment. */

@media (max-width: 520px) {
    .footer-cta h2 {
        font-size: clamp(1.95rem, 11vw, 3rem);
    }

    .footer-2 {
        letter-spacing: 0.16em;
    }

    .section--services .section-subtitle {
        width: min(31rem, calc(100vw - 44px)) !important;
        font-size: clamp(0.96rem, 4vw, 1.08rem) !important;
        line-height: 1.55 !important;
    }

    .section-subtitle,
    .section--services .section-subtitle {
        max-width: calc(100vw - 44px) !important;
        padding-inline: 0 !important;
        font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
        line-height: 1.55 !important;
    }

    .section-heading {
        padding-inline: 20px !important;
    }

    .section-subtitle {
        max-width: calc(100vw - 48px) !important;
        font-size: 0.98rem !important;
    }
}

/* Header menu: visible at the top on desktop too, then JS adds .header--hidden. */

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    z-index: 1000 !important;
    padding: clamp(1rem, 1.8vw, 1.45rem) 0 !important;
    transition: transform 0.55s var(--ease-premium), opacity 0.35s var(--ease-premium), background 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium) !important;
    transform: translateY(0) !important;
    will-change: background, padding !important;
    display: block !important;
    right: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.header.scrolled {
    background: color-mix(in srgb, var(--bg) 80%, transparent) !important;
    backdrop-filter: blur(18px) saturate(112%) !important;
    border-bottom: 1px solid var(--line-soft);
    padding: 1rem 0;
    -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
    border-bottom-color: color-mix(in srgb, var(--line) 62%, transparent) !important;
}

@media (min-width: 821px) {
    .header:not(.scrolled) {
        padding-top: clamp(1.8rem, 3vw, 2.8rem) !important;
    }
}


.nav {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
}

.nav a:not(.nav-icon-link):hover::after,
.nav a:not(.nav-icon-link):focus-visible::after {
    opacity: .5 !important;
    transform: translateX(-50%) scaleX(1) !important;
}

.theme-toggle,
.nav-icon-link {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.nav-icon-link:hover,
.nav-icon-link:focus-visible {
    color: var(--text) !important;
    outline: none !important;
}

/* Mobile/top menu stays centered and visible, no wordmark. */

/* Side rail: typographic, not pill buttons. Appears only after scroll on desktop via JS. */

.side-nav {
    position: fixed;
    right: clamp(16px, 2.1vw, 34px) !important;
    top: 50%;
    z-index: 995;
    transform: translate(12px, -50%);
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 1.5vh, 1.15rem) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.55s var(--ease-premium), transform 0.55s var(--ease-premium);
    padding-block: 0.65rem;
    border-right: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.side-nav.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(0, -50%);
}

.side-nav a:hover,
.side-nav a:focus-visible,
.side-nav a.is-active {
    color: var(--text) !important;
}

.side-nav a:hover::after,
.side-nav a:focus-visible::after,
.side-nav a.is-active::after {
    height: 42px;
    opacity: .4;
}

/* Proof/Vize info boxes: same subtle color wake-up as service info boxes. */

/* Contact portrait: image only, with radius. No frame/box/shadow in either theme. */

.contact-visual {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 10px !important;
    justify-self: end;
    max-width: min(430px, 34vw) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html[data-theme="light"] .contact-visual,
html[data-theme="dark"] .contact-visual {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Unified visual scale for images/cards across light and dark. */

.service-visual,
.service-visual img,
.project-img-wrapper,
.proof-item,
.service-tag {
    border-radius: 10px !important;
}

.btn,
.plus-btn,
.service-tag {
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease-premium) !important;
}

/* Keep the desktop vertical scroll indicator construction; on small screens only move the whole unit to center. */

/* =========================================================
   V9 final alignment/system patch
   - remove Vize from nav handled in PHP
   - fix subtitles and ghost overflow
   - align menu icons/text
   - make light mode carry the same ambient energy as dark
   - unify heading micro-copy for services/projects/proof
   ========================================================= */

/* Header/menu baseline: every item, icon and button sits on one visual axis. */

.header-inner,
.nav,
.nav ul,
.nav li,
.nav a,
.nav-icon-link,
.theme-toggle {
    align-items: center !important;
}

.nav-icon-link svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.theme-toggle [data-theme-icon] {
    font-size: 0.9rem !important;
    line-height: 14px !important;
    display: inline-flex !important;
    transform: translateY(0) !important;
    width: 14px !important;
    height: 14px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Side rail: active/hover accent line further from the text. */

/* Section heading system — one centered, protected axis for every section. */

.section-heading .section-kicker,
.section-heading .section-subtitle {
    margin-inline: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.section-heading .section-kicker {
    margin-bottom: clamp(0.85rem, 1.5vw, 1.25rem) !important;
}

.section-heading .section-title {
    font-size: clamp(3rem, 8.5vw, 7rem);
    letter-spacing: -0.055em;
    margin-bottom: 1.35rem;
    display: inline-block;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: min(100%, 1100px) !important;
    text-align: center !important;
    transform: none !important;
}

.section-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--muted);
    max-width: min(680px, calc(100vw - 72px)) !important;
    line-height: 1.5;
    display: block !important;
    width: auto !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Ghost words remain decorative only; they cannot create horizontal overflow. */

.section-title::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50% !important;
    font-size: clamp(1.62em, 2.1em, 2.2em) !important;
    font-weight: 900;
    color: var(--text);
    opacity: 0.055 !important;
    /* More subtle ghost text */
    pointer-events: none;
    z-index: -2;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
    transform: translate(-50%, -48%) translateY(var(--parallax-y, 0)) !important;
    transition: transform 0.1s linear;
    line-height: 0.82;
    white-space: nowrap;
    max-width: 100vw !important;
    right: auto !important;
    width: min(100vw, 200%) !important;
    text-align: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Light mode should share the same living/ambient feeling as dark, just softer. */

html[data-theme="light"] body::before {
    opacity: 0.64 !important;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--section-wash, #d5bdaf) 15%, transparent), transparent 36%),
        radial-gradient(circle at 25% 82%, rgba(255, 255, 255, 0.58), transparent 38%),
        radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--section-wash, #9eb3c2) 10%, transparent), transparent 42%) !important;
}

html[data-theme="light"] .section--services::before,
html[data-theme="light"] .section--projects::before,
html[data-theme="light"] .section--proof::before {
    opacity: 0.86 !important;
    background: radial-gradient(circle at 72% 14%, color-mix(in srgb, var(--section-accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.38), transparent 40%),
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--section-accent) 5%, transparent) 48%, transparent 100%) !important;
}

html[data-theme="light"] .section-title::before {
    opacity: 0.055 !important;
}

html[data-theme="light"] .service-item:has(.service-header[aria-expanded="true"]) {
    background: radial-gradient(ellipse at 82% 30%, color-mix(in srgb, var(--service-accent) 34%, transparent), transparent 63%),
        radial-gradient(ellipse at 22% 88%, color-mix(in srgb, var(--service-accent) 16%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 84%, transparent), transparent 112%) !important;
}

/* Projects and Vize inherit the same section heading rhythm as Služby. */

.section--projects .section-heading,
.section--proof .section-heading,
.section--services .section-heading {
    margin-bottom: clamp(4.4rem, 8vw, 7.2rem) !important;
}

.section--projects .section-subtitle {
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    font-size: clamp(0.92rem, 1.1vw, 1.02rem) !important;
    color: var(--muted);
    margin-top: 1.25rem !important;
}

/* Proof boxes: light/dark hover glow follows the service boxes more closely. */

html[data-theme="dark"] .proof-item:hover {
    background: radial-gradient(circle at 82% 20%, color-mix(in srgb, #9eb3c2 19%, transparent), transparent 48%),
        color-mix(in srgb, var(--panel) 94%, #050505) !important;
}

/* Contact image: keep clean image-only treatment in both themes. */

.contact-visual,
.contact-visual img {
    box-shadow: none !important;
    border: 0 !important;
}

/* Make overall scale consistent between light and dark. */

.service-item,
.proof-item,
.project-img-wrapper,
.contact-visual img {
    border-radius: 10px !important;
}

/* =========================================================
   V10 polish overrides
   ========================================================= */

:root {
    /* Colors - Approved Palette */
    --bg: #0A0A0A;
    --text: #0e0e0e;
    --muted: #66615c;
    --muted-strong: #35312d;
    --line: rgba(14, 14, 14, 0.15);
    --line-soft: rgba(14, 14, 14, 0.085);
    --card: rgba(14, 14, 14, 0.045);
    --card-hover: rgba(14, 14, 14, 0.075);
    --accent: #111111;
    /* Layout & Spacing */
    --layout-max: 1320px;
    --gutter: clamp(22px, 6vw, 88px);
    --section-padding: clamp(5rem, 10vw, 9rem);
    /* Transitions - 'Expensive' feel (slow & soft) */
    --ease-premium: cubic-bezier(0.2, 0, 0.1, 1);
    --transition-slow: 1.4s var(--ease-premium);
    --transition-med: 0.8s var(--ease-premium);
    --transition-fast: 0.4s var(--ease-premium);
    /* Background state */
    --bg-atmosphere-opacity: 0.08;
    --layout-max: 1280px;
    --accent-sand: #caa88e;
    --accent-blue: #819db0;
    --accent-olive: #8f9f6d;
    --accent-clay: #d6b19c;
    --page-section-wash: rgba(255, 255, 255, 0.02);
    /* Light theme is the fallback/default. JS upgrades to system/user choice. */
    --bg: #F3F0EA;
    --panel: rgba(255, 255, 255, 0.32);
    --panel-strong: rgba(255, 255, 255, 0.58);
    --signature-rgb: 17, 17, 17;
    --bg-atmosphere-opacity: 0.06;
    --safe-width: min(calc(100% - clamp(42px, 8vw, 152px)), var(--layout-max));
    --bg: #e6e6e6;
    --heading-subtitle-max: min(92vw, 40rem);
}

/* Header / menu alignment */

.header-inner {
    max-width: var(--layout-max);
    margin-inline: auto !important;
    padding-inline: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1rem, 2.2vw, 2rem) !important;
    width: min(100% - clamp(36px, 6vw, 104px), var(--layout-max)) !important;
}

.nav li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav a:not(.nav-icon-link)::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -0.3rem !important;
    width: 18px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.2) !important;
    transition: opacity .25s ease, transform .25s ease !important;
}

.side-nav a::after,
.side-nav a::before {
    inset-inline-start: auto !important;
}

.side-nav a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.52rem;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, transparent, var(--text), transparent);
    opacity: 0;
    right: calc(100% + 0.42rem) !important;
    top: 50%;
    transform: translateY(-50%);
    transition: height .25s ease, opacity .25s ease;
}

.side-nav a {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: var(--muted) !important;
    padding: 0.34rem 0.72rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    min-height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    -webkit-backdrop-filter: none !important;
    transition: color .25s ease, opacity .25s ease !important;
    padding-block: 0.2rem !important;
}

/* Heading / subtitle responsiveness */

.section-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.25rem;
    text-align: center !important;
}

.section-subtitle,
.section-heading .section-subtitle,
.section--services .section-subtitle,
.section--projects .section-subtitle,
.section--proof .section-subtitle,
.service-header-subtitle {
    width: 100% !important;
    max-width: var(--heading-subtitle-max) !important;
    margin-inline: auto !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.45 !important;
}

.section--projects .section-subtitle,
.section--proof .section-subtitle,
.section--services .section-subtitle {
    color: var(--muted) !important;
    font-size: clamp(1rem, 1.55vw, 1.42rem) !important;
}

.section-heading .title-decoration {
    margin-inline: auto !important;
}

/* Light theme hover / glow parity */

html[data-theme="light"] .service-item:hover,
html[data-theme="light"] .proof-item:hover,
html[data-theme="light"] .project-card:hover .project-img-wrapper,
html[data-theme="light"] .contact-visual-only img:hover {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .service-item:hover {
    background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--service-accent, #d7b79f) 26%, transparent), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)) !important;
}

/* Service preview */

.service-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.8;
    filter: grayscale(0.5);
    transition: transform 0.45s ease, opacity 0.35s ease, filter 0.35s ease !important;
    box-shadow: none !important;
}

.service-item:hover .service-visual img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.015) !important;
}

.service-tag.is-current-preview {
    border-color: color-mix(in srgb, var(--tag-accent, #d7b79f) 50%, rgba(255, 255, 255, 0.22)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-accent, #d7b79f) 18%, transparent) !important;
}

html[data-theme="light"] .service-tag.is-current-preview {
    background: color-mix(in srgb, var(--tag-accent, #d7b79f) 10%, #ffffff) !important;
}

/* Contact page: image only */

.contact-page--visual-only .contact-hero {
    min-height: calc(100vh - 5rem) !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(6.5rem, 10vw, 9rem) 1.25rem 2rem !important;
}

.contact-page--visual-only .contact-visual-only {
    width: min(100%, 560px) !important;
}

.contact-page--visual-only .contact-visual-only img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    border: 1px solid rgba(127, 127, 127, 0.18) !important;
}

/* Project logo wrappers */

/* Mobile / narrow fixes */

@media (max-width: 1024px) {
    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section--services .section-title,
    .section--projects .section-title,
    .section--proof .section-title {
        max-width: min(92vw, 10ch) !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle,
    .service-header-subtitle {
        max-width: min(88vw, 34rem) !important;
    }
}

@media (max-width: 640px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .proof-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .logo {
        font-size: 0.95rem;
    }

    .theme-toggle [data-theme-label] {
        display: none;
    }

    .section-title {
        font-size: clamp(2.25rem, 16vw, 3.25rem);
        text-align: center;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .service-header[aria-expanded="true"] {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) .service-header-subtitle {
        display: none;
    }

    .service-item h3 {
        font-size: clamp(2.2rem, 18vw, 3.35rem);
    }

    .service-description p {
        font-size: 1rem;
    }

    .project-card {
        max-width: 320px;
    }

    .footer-cta h2 {
        font-size: clamp(2rem, 11vw, 3.3rem);
        max-width: 11ch;
    }

    .footer-bottom-inner {
        align-items: flex-start;
    }

    .scroll-top {
        width: 44px;
        height: 44px;
    }

    .hero {
        min-height: 94vh;
        padding-top: 5.5rem;
        padding-bottom: 9.5rem;
    }

    .section-heading {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .section-title::before {
        left: 50% !important;
        transform: translate(-50%, -48%) translateY(var(--parallax-y, 0)) !important;
        max-width: 100vw;
    }

    .section-title[data-accent]::after,
    .title-decoration {
        left: 50% !important;
        transform: translateX(-50%) scaleX(1) !important;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) .service-header {
        grid-template-columns: 1fr auto;
        gap: 1rem;
        padding-top: 1.65rem;
        padding-bottom: 1.65rem;
        min-height: 158px;
    }

    .service-content-inner {
        padding-left: clamp(1.15rem, 6vw, 1.6rem);
        padding-right: clamp(1.15rem, 6vw, 1.6rem);
    }

    .contact-visual {
        max-width: min(260px, 70vw) !important;
    }

    .contact-visual img {
        max-height: 310px !important;
    }

    .hero-scroll {
        left: 50% !important;
        bottom: -4rem !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        align-items: center !important;
        gap: 1.1rem !important;
        opacity: 0.55;
    }

    .scroll-text {
        writing-mode: vertical-lr !important;
        flex-direction: column !important;
        letter-spacing: 0.34em !important;
        white-space: normal !important;
        display: flex !important;
    }

    .scroll-line {
        width: 1px !important;
        height: 36px !important;
        background: linear-gradient(to bottom, var(--muted), transparent) !important;
    }

    .contact-hero {
        padding-top: 110px !important;
        padding-bottom: 3rem !important;
    }

    .contact-info-list {
        gap: 1.8rem !important;
    }

    .contact-back {
        margin-top: 3rem !important;
        margin-bottom: 4.5rem !important;
    }

    .header {
        padding: 1.35rem 0;
        top: 0.3rem !important;
    }

    .nav ul {
        column-gap: 0.55rem !important;
    }

    .nav a:not(.nav-icon-link),
    .theme-toggle,
    .nav-icon-link {
        font-size: 0.65rem !important;
        letter-spacing: 0.14em !important;
    }

    .section--services .section-title,
    .section--projects .section-title,
    .section--proof .section-title {
        font-size: clamp(2.5rem, 13vw, 4.8rem) !important;
        max-width: min(94vw, 8ch) !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle,
    .section--services .section-subtitle,
    .section--projects .section-subtitle,
    .section--proof .section-subtitle,
    .service-header-subtitle {
        max-width: min(84vw, 22rem) !important;
    }

    .service-header {
        padding-inline: 1.1rem !important;
    }

    .service-visual {
        max-width: 100%;
        min-height: 240px !important;
    }

    .contact-page--visual-only .contact-hero {
        padding-top: 5.8rem !important;
    }
}

/* =========================================================
   V11 fixes: safe headings, aligned icons, static service images
   ========================================================= */

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

main,
.section,
.container,
.section-heading,
.title-services-wrapper {
    overflow: visible !important;
}

.title-services-wrapper,
.section-heading>* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.section-title,
.title-services,
.section--services .section-title,
.section--projects .section-title,
.section--proof .section-title {
    display: block !important;
    width: auto !important;
    max-width: min(100%, 11.5ch) !important;
    margin-inline: auto !important;
    padding: 0.12em 0.04em 0.18em !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
}

.section--services .section-title,
.section--projects .section-title,
.section--proof .section-title {
    font-size: clamp(3.2rem, 9vw, 7.1rem) !important;
}

.section-title::before,
.title-services::before,
.section-title::after,
.title-services::after {
    pointer-events: none !important;
    max-width: 100vw !important;
}

/* top menu: icons visually in the same baseline as menu text */

.nav ul,
.nav li {
    align-items: center !important;
}

.nav a,
.nav-icon-link,
.theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    min-height: 24px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    height: 22px !important;
}

/* Static service images: no cycling, no crossfade. Multiple images stack vertically. */

.service-item:hover .service-visual-stack img {
    transform: scale(1.01) !important;
}

.service-visual.is-stack .service-visual-stack img {
    aspect-ratio: 4 / 5 !important;
}

/* Restored contact layout, current portrait only */

.contact-page:not(.contact-page--visual-only) .contact-visual img {
    content: url('../images/contact-portrait.jpg');
    border-radius: clamp(12px, 1.2vw, 18px) !important;
}

@media (max-width: 1180px) {
    .section-heading {
        width: min(100%, calc(100vw - 3.2rem)) !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle {
        max-width: min(620px, calc(100vw - 4rem)) !important;
    }
}

@media (max-width: 420px) {
    .section-heading {
        width: 100% !important;
        padding-inline: 1rem !important;
    }

    .section--services .section-title,
    .section--projects .section-title,
    .section--proof .section-title {
        font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
        max-width: min(100%, 8.5ch) !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle {
        max-width: calc(100vw - 2.2rem) !important;
        padding-inline: 0.35rem !important;
    }

    .nav-icon-link,
    .theme-toggle {
        transform: translateY(-3px) !important;
    }
}

/* =========================================================
   V12: mobile menu spacing, hero copy order, full ambient,
   contact intro restoration, responsive service previews
   ========================================================= */

/* Fullscreen ambient background, independent from content column */

.page-atmosphere,
.atmosphere-bg,
.atmosphere-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    pointer-events: none !important;
}

.page-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3 !important;
    pointer-events: none;
    overflow: hidden !important;
}

.atmosphere-bg,
.atmosphere-overlay {
    transform: translateZ(0) !important;
}

/* Header navigation: more readable spacing + icons visually on the same baseline */

.nav ul {
    display: flex !important;
    gap: clamp(1.1rem, 2vw, 2.45rem) !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    row-gap: 0.55rem !important;
    column-gap: clamp(1.05rem, 2.4vw, 2.05rem) !important;
}

.nav a:not(.nav-icon-link) {
    position: relative !important;
    padding-bottom: 0.82rem !important;
    padding-top: 0 !important;
    letter-spacing: 0.22em !important;
    line-height: 1 !important;
    transform: translateY(1px) !important;
}

.nav-icon-link,
.theme-toggle {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-8px) !important;
    position: relative !important;
    line-height: 1 !important;
}

.nav-icon-link svg,
.theme-toggle [data-theme-icon] {
    display: block !important;
    line-height: 1 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Hero: requested order — human / personal text / VZDUCH / domains */

.hero-title {
    font-size: clamp(3.5rem, 10vw, 8.5rem);
    margin-bottom: 0 !important;
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.05em;
    order: 3 !important;
    margin-top: clamp(0.25rem, 1vw, 0.7rem) !important;
}

/* Section headings: extra safe area so titles/subtitles never clip on scroll/narrow widths */

.section-heading {
    position: relative;
    text-align: center !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    margin-bottom: clamp(4rem, 8vw, 7rem);
    isolation: isolate;
    width: min(100%, calc(100vw - clamp(2rem, 8vw, 7.5rem))) !important;
    padding-inline: clamp(20px, 3vw, 44px) !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(24px, 4vw, 64px) !important;
    padding-right: clamp(24px, 4vw, 64px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: clamp(1.6rem, 4vw, 3.25rem) clamp(1rem, 4vw, 2.4rem) !important;
    contain: none !important;
}

.section-title,
.title-services,
.section-subtitle,
.section-heading .section-subtitle {
    overflow: visible !important;
    contain: none !important;
}

.section-title,
.title-services {
    margin-inline: auto !important;
    text-align: center !important;
    max-width: min(100%, 12ch) !important;
    line-height: 0.92 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    padding-inline: 0.08em !important;
}

/* Service colors stay, but light cards blend better with the page background */

html[data-theme="light"] .service-tag {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tag-accent, #d7b79f) 6%, var(--bg)) 0%, color-mix(in srgb, var(--tag-accent, #d7b79f) 3%, var(--bg)) 100%) !important;
    border-color: color-mix(in srgb, var(--tag-accent, #d7b79f) 24%, rgba(0, 0, 0, 0.12)) !important;
}

html[data-theme="light"] .service-tag.is-current-preview,
html[data-theme="light"] .service-tag.is-open {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tag-accent, #d7b79f) 11%, var(--bg)) 0%, color-mix(in srgb, var(--tag-accent, #d7b79f) 5%, var(--bg)) 100%) !important;
}

/* Static service images: desktop may show stacked pairs; mobile keeps one clean preview */

/* Contact: restore intro text, keep current portrait, even mobile rhythm */

.contact-intro {
    display: grid !important;
    gap: clamp(0.7rem, 1.4vw, 1rem) !important;
    margin-bottom: clamp(2.6rem, 5vw, 4.5rem) !important;
    max-width: 720px !important;
}

.contact-info-list {
    margin: 3.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
    row-gap: clamp(2.4rem, 4.2vw, 3.7rem) !important;
    column-gap: clamp(2rem, 5vw, 4.8rem) !important;
}

.contact-info-item {
    display: grid !important;
    flex-direction: column;
    gap: 0.85rem !important;
}

.contact-visual img {
    width: 100% !important;
    height: auto;
    object-fit: cover !important;
    max-height: min(72vh, 680px) !important;
    aspect-ratio: 4 / 5 !important;
    display: block !important;
    border-radius: clamp(14px, 1.35vw, 22px) !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    content: url('../images/contact-portrait.jpg') !important;
}

@media (max-width: 980px) {
    .nav ul {
        column-gap: clamp(0.95rem, 3vw, 1.55rem) !important;
    }

    .nav a:not(.nav-icon-link) {
        letter-spacing: 0.2em !important;
    }

    .contact-title {
        font-size: clamp(2.7rem, 8.5vw, 5.2rem) !important;
    }
}

@media (max-width: 480px) {
    /* Handled in main declaration */

    .nav ul {
        column-gap: 0.85rem !important;
        row-gap: 0.5rem !important;
    }

    .nav a:not(.nav-icon-link) {
        letter-spacing: 0.15em !important;
        font-size: 0.62rem !important;
    }

    .nav-icon-link,
    .theme-toggle {
        transform: translateY(-6px) !important;
    }

    .contact-info-list {
        row-gap: 2.9rem !important;
    }

    .contact-visual {
        width: min(54vw, 220px) !important;
    }
}

/* =========================================================
   V14 final service/contact/proof polish
   ========================================================= */

/* 1) Main section subtitles are 20% smaller and safe on all widths. */

.section-subtitle,
.section-heading .section-subtitle,
.section--services .section-subtitle,
.section--projects .section-subtitle,
.section--proof .section-subtitle {
    display: block !important;
    width: min(100%, 720px) !important;
    max-width: min(720px, calc(100vw - clamp(2.8rem, 10vw, 10rem))) !important;
    margin-inline: auto !important;
    padding-inline: clamp(0.8rem, 2vw, 1.35rem) !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.52 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(0.82rem, 1.16vw, 1.02rem) !important;
}

/* 2) Closed and opened service card text follows one left-aligned axis. */

.service-item .service-title-group,
.service-item .service-header-subtitle,
.service-item .service-description,
.service-item .service-description>p,
.service-item .service-tags,
.service-item .tag-header,
.service-item .tag-content,
.service-item .service-actions {
    text-align: left !important;
}

.service-item .service-title-group {
    align-items: flex-start !important;
    justify-items: start !important;
    width: min(100%, 56rem) !important;
}

.service-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    cursor: pointer;
    padding: clamp(3rem, 7vw, 5rem) 0;
    position: relative;
    transition: padding 0.8s var(--ease-premium);
    padding-block: clamp(2.8rem, 6vw, 4.8rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    gap: clamp(1rem, 3vw, 2.5rem) !important;
}

.service-item .section-kicker,
.service-item .service-header-subtitle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.service-content-inner {
    min-height: 0;
    padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem);
    /* Vertical padding only, container handles sides */
    max-width: 1100px;
    max-width: 1120px;
    padding-bottom: clamp(3.25rem, 7vw, 6rem);
    margin-inline: auto !important;
    padding-left: clamp(1.65rem, 5vw, 5rem);
    padding-right: clamp(1.65rem, 5vw, 5rem);
    width: min(100%, 1120px) !important;
    padding-inline: clamp(1.2rem, 3vw, 2.6rem) !important;
}

.service-description>p {
    max-width: 46rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3) Service photos: desktop side stack, mobile images inside opened sub-item. */

.tag-media {
    display: none;
}

.service-visual {
    position: relative;
    border-radius: 8px;
    overflow: visible !important;
    background: var(--card);
    aspect-ratio: 4/5;
    box-shadow: 0 34px 80px -44px color-mix(in srgb, var(--text) 42%, transparent) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
}

html[data-theme="dark"] .service-visual-stack img,
html[data-theme="dark"] .service-visual img.service-preview-image {
    background: rgba(255, 255, 255, 0.035) !important;
}

/* Desktop: side photo column stays active and tag-media is not duplicated. */

/* Mobile / narrow: no standalone visual column; image lives inside the opened sub-service. */

/* Open tag must have enough room for text + images on all screens. */

.service-tag.is-open .tag-body {
    max-height: 1600px !important;
}

.tag-content {
    padding: 0 1.75rem 1.75rem;
    font-size: 0.95rem;
    color: var(--muted-strong);
    line-height: 1.6;
    max-width: 42rem !important;
}

/* 4) Service actions without gallery trigger. */

.service-actions {
    display: flex !important;
    gap: clamp(1rem, 2vw, 1.4rem) !important;
    margin-top: clamp(2.4rem, 5vw, 4rem) !important;
}

/* 5) Distinct pastel lighting for each proof card, subtle in both themes. */

/* 6) Contact intro paragraph: premium, responsive, not too loud. */

/* 7) Mobile refinements for service typography and spacing. */

/* =========================================================
   V15 final polish: one desktop service preview, contact intro,
   return link, proof-card revert with individual hover accents
   ========================================================= */

/* Desktop service preview: only one active image, always fills its frame. */

/* Contact intro: left axis, first thought stronger, follow-up softer. */

.contact-intro,
.contact-intro .section-kicker,
.contact-title,
.contact-desc {
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
}

/* Proof cards: light steel gray base, white headings, subtle colored accent on hover. */

.proof-item {
    padding: 3.5rem 2.5rem;
    background: rgb(38 40 43 / 16%) !important;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    position: relative !important;
    transition: transform .35s var(--ease-premium), border-color .35s ease, background .35s ease, box-shadow .35s ease !important;
    z-index: 2 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    --proof-soft: color-mix(in srgb, var(--item-accent, #d8b4a0) 18%, transparent);
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
}

.proof-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.5rem;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--item-accent, var(--text)) 58%, var(--text)), transparent) !important;
    opacity: 0.55 !important;
}

.proof-item:hover {
    border-color: rgba(200, 205, 210, 0.28) !important;
    background: radial-gradient(circle at 18% 0%, rgba(180, 190, 200, 0.08), transparent 42%),
        rgb(44 47 51 / 0.95) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] .proof-item {
    background: rgba(235, 233, 230, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.09) !important;
}

html[data-theme="light"] .proof-item h4 {
    color: #1a1a1a !important;
}

html[data-theme="light"] .proof-item:hover {
    background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--item-accent, #d8b4a0) 18%, transparent), transparent 44%),
        rgba(240, 238, 234, 0.98) !important;
    border-color: color-mix(in srgb, var(--item-accent, #d8b4a0) 46%, rgba(0, 0, 0, 0.16)) !important;
}

/* =========================================================
   V16 final fixes: single image everywhere + stronger contact statement
   ========================================================= */

/* One image only for each opened sub-service, including mobile. */

.tag-media img:nth-child(n+2),
.service-visual-stack img:nth-child(n+2) {
    display: none !important;
}

/* Desktop preview: remove the hard forced clamp height from v15 and let one image sit naturally. */

/* Mobile service media: keep only a single clean image and prevent oversized stacks. */

/* Contact intro: make the first statement much stronger without breaking mobile. */

.contact-desc {
    max-width: min(100%, 860px) !important;
    margin: 0 !important;
    font-size: clamp(1.08rem, 1.6vw, 1.48rem) !important;
    line-height: 1.22 !important;
    color: var(--muted-strong, var(--text)) !important;
    display: block !important;
}

/* =========================================================
   V17 polish: safer ghost titles, tighter scale, service lists
   ========================================================= */

/* Decorative underlay must stay visible, but slightly smaller and calmer. */

.section-title,
.title-services,
.title-services-wrapper,
.section-heading {
    overflow: visible !important;
}

/* Give the small kicker more breathing room above the main title. */

.section-heading>.section-kicker,
.section-heading .title-services-wrapper+.section-subtitle,
.section-heading>.section-title+.section-subtitle {
    --heading-gap-tune: clamp(0.7rem, 1.45vw, 1.25rem);
}

.section-heading>.section-kicker {
    margin-bottom: clamp(1rem, 1.8vw, 1.55rem) !important;
}

/* Keep mobile titles from gaining too much vertical air. */

/* =========================================================
   V18 detail modals + service micro detail polish
   ========================================================= */

.tag-more {
    appearance: none;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--tag-accent, #d7b79f) 78%, var(--text-main));
    font-size: clamp(0.68rem, 0.72vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.45rem 0;
    position: relative;
    line-height: 1.1;
}

.tag-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tag-accent, #d7b79f), transparent);
    opacity: 0.7;
    transform: scaleX(0.72);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.tag-more:hover::after,
.tag-more:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
}

.tag-content a,
.detail-modal-copy a {
    color: color-mix(in srgb, var(--tag-accent, #d7b79f) 75%, var(--text-main));
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.detail-modal.is-open .detail-modal-card {
    transform: translateY(0) scale(1);
}

html[data-theme="light"] .detail-modal-close {
    background: #111;
    color: #f7f4ef;
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .detail-modal-media img {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 44px rgba(35, 28, 20, 0.12);
}

/* Desktop side preview: always one clean crop. */

.service-visual-stack {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: clamp(1rem, 2vw, 1.4rem) !important;
    width: 100% !important;
    align-content: start !important;
}

.service-visual-stack img,
.service-visual img.service-preview-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    border-radius: clamp(10px, 1.15vw, 18px) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
    object-position: center !important;
    background: rgba(0, 0, 0, 0.06) !important;
    min-height: 0 !important;
    max-height: none !important;
}

.service-visual-stack img:nth-child(n+2) {
    display: none !important;
}

/* =========================================================
   V19 refinements
   ========================================================= */

.section-title::before,
.title-services::before {
    max-width: none !important;
    overflow: visible !important;
    width: min(100vw, 200%) !important;
    transform: translate(-50%, -48%) translateY(var(--parallax-y, 0)) scale(0.76) !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

.title-services,
.section--services .section-title {
    font-size: clamp(3.4rem, 8vw, 8.2rem);
    letter-spacing: -0.055em;
}

.section--services .section-subtitle {
    width: min(42rem, calc(100vw - 40px)) !important;
    padding-inline: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    max-width: 46rem;
}

.service-title-group>.section-kicker {
    display: block !important;
    margin-bottom: 1.65rem !important;
}

.service-header-subtitle {
    font-size: clamp(0.95rem, 1.35vw, 1.18rem) !important;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.4;
    max-width: 36rem !important;
    opacity: 0.52 !important;
    transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
    margin-top: 0.5rem;
    text-align: left !important;
}

html[data-theme="light"] .detail-modal-backdrop {
    background: rgba(18, 18, 18, 0.64);
}

html[data-theme="light"] .detail-modal-card {
    background: radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--modal-accent) 16%, rgba(255, 255, 255, 0.85)) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, rgba(30, 31, 34, 0.96), rgba(43, 41, 39, 0.94) 54%, rgba(68, 57, 48, 0.92));
    box-shadow: 0 34px 90px rgba(35, 28, 20, 0.18);
}

html[data-theme="light"] .detail-modal-topline {
    background: linear-gradient(180deg, rgba(34, 34, 36, 0.94), rgba(34, 34, 36, 0.78), rgba(34, 34, 36, 0));
}

.detail-modal-card h3 {
    max-width: 10ch;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(3.2rem, 9vw, 6.1rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}

.detail-modal-copy p+p {
    margin-top: 1.5rem;
}

body.has-detail-modal {
    overflow: hidden;
}

.portfolio-detail-main {
    padding-top: 8.5rem;
    padding-bottom: 5rem;
}

.portfolio-detail-back {
    margin-bottom: 1.8rem;
}

.portfolio-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: start;
    margin-bottom: 4rem;
}

.portfolio-detail-copy {
    padding: clamp(1.25rem, 2vw, 1.8rem);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.portfolio-detail-title {
    font-size: clamp(2.8rem, 6.5vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    margin: 0.5rem 0 1.4rem;
}

.portfolio-detail-lead {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 1.45rem;
    max-width: 48rem;
}

.portfolio-detail-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}

.portfolio-detail-text p+p {
    margin-top: 1rem;
}

.portfolio-detail-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.portfolio-detail-bullets li {
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portfolio-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.8rem;
}

.portfolio-detail-featured img {
    width: 100%;
    min-height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.portfolio-detail-section-heading {
    margin-bottom: 1.5rem;
}

.portfolio-detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-detail-item {
    margin: 0;
}

.portfolio-detail-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.portfolio-detail-footer-cta {
    margin-top: 4rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.portfolio-detail-footer-cta h2 {
    font-size: clamp(2.1rem, 4.2vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    margin: 0.5rem 0 1rem;
}

.portfolio-detail-footer-cta p {
    max-width: 46rem;
    margin-bottom: 1.4rem;
    color: rgba(255, 255, 255, 0.76);
}

/* V19 final: prepared, non-active portfolio CTA links */

.tag-more--link.is-disabled,
button.tag-more--link.is-disabled {
    cursor: default;
    opacity: 0.52;
    filter: saturate(0.72);
    transform: none !important;
    box-shadow: none !important;
}

.tag-more--link.is-disabled:hover,
button.tag-more--link.is-disabled:hover {
    border-color: color-mix(in srgb, var(--tag-accent) 42%, rgba(255, 255, 255, 0.18));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

/* =========================================================
   V20 final polish: hero, collapsed defaults, fullscreen info pages
   ========================================================= */

/* Return the micro CTA to the v18 editorial underline style. */

.tag-more-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    margin: clamp(0.9rem, 1.8vw, 1.25rem) 0 0.65rem !important;
    align-items: center;
    margin-top: 1.2rem;
    margin-bottom: 1rem;
}

.tag-more,
.tag-more--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: auto !important;
    padding: 0.45rem 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--tag-accent, #d7b79f) 78%, var(--text-main)) !important;
    text-decoration: none !important;
    font-size: clamp(0.68rem, 0.72vw, 0.78rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    appearance: none !important;
    box-shadow: none !important;
    width: auto !important;
    position: relative !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    transform: none !important;
}

.tag-more::after,
.tag-more--link::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--tag-accent, #d7b79f), transparent) !important;
    opacity: 0.7 !important;
    transform: scaleX(0.72) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.tag-more:hover::after,
.tag-more:focus-visible::after,
.tag-more--link:hover::after,
.tag-more--link:focus-visible::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

.tag-more:hover,
.tag-more:focus-visible,
.tag-more--link:hover,
.tag-more--link:focus-visible {
    transform: none !important;
    border-color: color-mix(in srgb, var(--tag-accent) 80%, white 20%);
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Fullscreen service info pages */

.detail-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 2, 2, 0.78) !important;
    backdrop-filter: blur(18px) !important;
}

.detail-modal-card>h3,
.detail-modal-lead,
.detail-modal-copy,
.detail-modal-info-grid,
.detail-modal-media,
.detail-modal-bottom-cta {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.detail-modal-panel h4 {
    margin: 0 0 1rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.86) !important;
}

.detail-modal-panel ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0.8rem !important;
}

.detail-modal-panel li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.72em !important;
    width: 0.34rem !important;
    height: 0.34rem !important;
    border-radius: 999px !important;
    background: var(--modal-accent, #d7b79f) !important;
}

/* Project logo treatment */

.project-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    filter: brightness(1.26) contrast(1.08) !important;
    transition: transform 2s var(--ease-premium), filter 1s ease;
    object-fit: contain !important;
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    transform: none !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
}

.project-card:nth-child(1) .project-img,
.project-card:nth-child(2) .project-img,
.project-card:nth-child(3) .project-img,
.project-card:hover:nth-child(1) .project-img,
.project-card:hover:nth-child(2) .project-img,
.project-card:hover:nth-child(3) .project-img {
    transform: none !important;
}

/* Contact copy stronger but still controlled */

.contact-title {
    margin: 0 !important;
    font-size: clamp(3rem, 7.6vw, 6.9rem) !important;
    line-height: 0.92;
    letter-spacing: -0.065em !important;
    color: var(--text) !important;
    max-width: 12ch !important;
}

.contact-desc-lead {
    display: block;
    color: var(--text) !important;
    font-size: clamp(1.8rem, 3.6vw, 3.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em;
    line-height: 1.02 !important;
    margin-bottom: clamp(0.85rem, 1.5vw, 1.25rem) !important;
    max-width: min(100%, 12ch) !important;
}

.contact-desc-detail {
    display: block;
    color: var(--muted) !important;
    font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
    font-weight: 400 !important;
    margin-left: 0 !important;
    line-height: 1.7;
    letter-spacing: -0.015em !important;
    max-width: 46rem !important;
    margin-top: 0.85rem;
}

@media (max-width: 560px) {
    .section-heading {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .section-subtitle {
        max-width: calc(100vw - 40px) !important;
        font-size: clamp(0.94rem, 4vw, 1.02rem) !important;
        line-height: 1.55 !important;
    }

    .hero-title--domain {
        font-size: clamp(3.9rem, 18vw, 6rem) !important;
    }

    .hero-desc--identity {
        max-width: 88vw !important;
        font-size: 1rem !important;
    }

    .detail-modal-card {
        padding-inline: 1rem !important;
    }

    .detail-modal-card>h3 {
        font-size: clamp(2.65rem, 14vw, 4.5rem) !important;
    }

    .detail-modal-cta {
        min-height: 3rem !important;
        padding-inline: 1rem !important;
    }
}

/* =========================================================
   V21 hotfix: hero order, true fullscreen modals, CTA alignment, logo contrast
   ========================================================= */

.hero-content--reordered {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(1.15rem, 2vw, 1.85rem) !important;
}

.hero-domain {
    order: 4 !important;
    margin-top: -0.1rem !important;
    color: var(--text) !important;
    opacity: 0.72 !important;
}

/* The micro action should sit with the text column, not on the far right. */

.service-tag .tag-more,
.service-tag .tag-more--link {
    margin-left: 0 !important;
}

/* Force service info to be a real viewport overlay even when moved out of accordion. */

.detail-modal.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
}

html.has-detail-modal,
body.has-detail-modal {
    overflow: hidden !important;
}

/* Project marks: full-area color field, white SVGs. */

html[data-theme="dark"] .project-img-wrapper {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 50%, transparent 70%) !important;
}

.project-img-wrapper::before,
.project-img-wrapper::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

.project-card:nth-child(2) .project-img-wrapper .project-img {
    width: 70% !important;
    height: 70% !important;
}

.project-card:nth-child(3) .project-img-wrapper .project-img {
    width: 78% !important;
    height: 78% !important;
}

/* =========================================================
   V22 polish: hero balance, service micro-links, fullscreen detail readability
   ========================================================= */

.hero-human {
    display: block;
    margin-bottom: clamp(0.1rem, 0.6vw, 0.45rem) !important;
    font-size: clamp(0.72rem, 1.2vw, 0.9rem) !important;
    line-height: 1;
    font-weight: 700;
    letter-spacing: clamp(0.22em, 0.66vw, 0.4em) !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    opacity: 0.72;
    order: 1 !important;
    margin: 0 !important;
}

.hero-title--domain {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: center;
    gap: 0 !important;
    white-space: nowrap;
    line-height: 0.78 !important;
    transform: translateX(clamp(1.05rem, 4.2vw, 3rem)) !important;
    letter-spacing: -0.043em !important;
}

.hero-title--domain>span:first-child {
    letter-spacing: -0.043em !important;
}

.hero-title--domain .hero-dotco {
    display: inline-block;
    font-size: 0.48em;
    font-weight: 300 !important;
    letter-spacing: 0.02em !important;
    opacity: 0.7 !important;
    transform: translateY(-0.045em) !important;
    margin-left: clamp(0.015em, 0.08vw, 0.055em) !important;
}

.hero-desc--identity {
    order: 3 !important;
    width: min(100%, 760px) !important;
    max-width: min(850px, 88vw) !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(1rem, 1.35vw, 1.22rem) !important;
    line-height: 1.72 !important;
    color: var(--muted-strong, var(--muted)) !important;
    margin-inline: auto !important;
    margin-top: clamp(0.75rem, 1.4vw, 1.25rem) !important;
    margin-bottom: clamp(0.35rem, 0.9vw, 0.8rem) !important;
    text-transform: none !important;
}

/* Service micro-links: place “Jak to funguje” visually around two thirds of the card. */

/* Fullscreen detail: cleaner top controls and stronger marketing rhythm. */

.detail-modal-copy {
    max-width: 64rem;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: clamp(0.96rem, 1.08vw, 1.08rem) !important;
    line-height: 1.7 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.85rem, 1.35vw, 1.25rem) !important;
    margin-top: clamp(2.2rem, 4.2vw, 3.8rem) !important;
}

.detail-modal-copy p {
    margin: 0 !important;
    padding: clamp(1.05rem, 1.45vw, 1.35rem) !important;
    border-radius: 1.15rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.028) !important;
    min-height: 100% !important;
}

.detail-modal-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.55rem) !important;
    margin-top: clamp(1.45rem, 2.6vw, 2.2rem) !important;
    max-width: 1180px !important;
}

.detail-modal-panel {
    padding: clamp(1.15rem, 1.8vw, 1.55rem) !important;
    border-radius: 1.1rem !important;
    border: 1px solid color-mix(in srgb, var(--modal-accent, #d7b79f) 34%, rgba(255, 255, 255, 0.08)) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--modal-accent, #d7b79f) 9%, rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, 0.018)) !important;
}

.detail-modal-panel li {
    position: relative !important;
    padding-left: 1.15rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.62 !important;
}

.detail-modal-media {
    display: grid !important;
    grid-template-columns: 1.12fr 0.88fr !important;
    gap: clamp(1rem, 2.2vw, 1.7rem) !important;
    margin-top: clamp(2rem, 4vw, 3.4rem) !important;
    max-width: 1180px !important;
    align-items: end !important;
}

.detail-modal-media img {
    width: 100% !important;
    height: clamp(280px, 35vw, 540px) !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    border-radius: clamp(1rem, 1.8vw, 1.65rem) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
}

.detail-modal-media img:nth-child(1) {
    transform: translateY(clamp(0.75rem, 2vw, 1.4rem)) !important;
}

.detail-modal-media img:nth-child(2) {
    height: clamp(230px, 28vw, 450px) !important;
    transform: translateY(clamp(-1.5rem, -2vw, -0.75rem)) !important;
}

@media (max-width: 1050px) {
    .detail-modal-copy {
        grid-template-columns: 1fr !important;
        max-width: 820px !important;
    }

    .detail-modal-media {
        grid-template-columns: 1fr !important;
        max-width: 820px !important;
    }

    .detail-modal-media img,
    .detail-modal-media img:nth-child(1),
    .detail-modal-media img:nth-child(2) {
        height: auto !important;
        transform: none !important;
    }
}

/* =========================================================
   V23: cleaner modal actions, grey project mark fields, shorter proof copy
   ========================================================= */

/* Detail pages: keep fullscreen, remove the hard top strip/line, improve heading line-height. */

/* Top CTA and bottom CTA: no pill/button look, more like an editorial action link. */

.detail-modal-cta,
.detail-modal-bottom-cta .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 0.5rem 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--modal-accent, #d7b79f) 62%, #ffffff 38%) !important;
    text-decoration: none !important;
    font-size: clamp(0.72rem, 0.78vw, 0.86rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    position: relative !important;
}

.detail-modal-cta::after,
.detail-modal-bottom-cta .btn::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0.18rem !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, currentColor, transparent) !important;
    opacity: 0.58 !important;
    transform: scaleX(0.78) !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.detail-modal-cta:hover,
.detail-modal-cta:focus-visible,
.detail-modal-bottom-cta .btn:hover,
.detail-modal-bottom-cta .btn:focus-visible {
    transform: translateY(-1px) !important;
    background: transparent !important;
    color: #ffffff !important;
}

.detail-modal-cta:hover::after,
.detail-modal-cta:focus-visible::after,
.detail-modal-bottom-cta .btn:hover::after,
.detail-modal-bottom-cta .btn:focus-visible::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}

/* Make the second info bubble a little brighter and more distinguished. */

.detail-modal-info-grid .detail-modal-panel:nth-child(2),
.detail-modal-copy p:nth-child(2) {
    border-color: color-mix(in srgb, var(--modal-accent, #d7b79f) 48%, rgba(255, 255, 255, 0.14)) !important;
    background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.09), transparent 44%),
        linear-gradient(180deg, color-mix(in srgb, var(--modal-accent, #d7b79f) 16%, rgba(255, 255, 255, 0.052)), rgba(255, 255, 255, 0.032)) !important;
}

/* Project logos: grayscale premium fields, still with depth; SVGs stay pure white. */

.project-img-wrapper,
.project-card:nth-child(1) .project-img-wrapper,
.project-card:nth-child(2) .project-img-wrapper,
.project-card:nth-child(3) .project-img-wrapper,
html[data-theme="dark"] .project-img-wrapper,
html[data-theme="light"] .project-img-wrapper {
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-bottom: clamp(1.45rem, 3vw, 2rem) !important;
    position: relative;
    width: 100% !important;
    height: clamp(150px, 13vw, 185px) !important;
    margin-inline: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: radial-gradient(circle at 50% 50%, #00000000 10%, #000000 74%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(0.75rem, 1.4vw, 1rem) !important;
}

.project-img-wrapper .project-img,
.project-img,
html[data-theme="light"] .project-img-wrapper .project-img,
html[data-theme="light"] .project-img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    width: 90% !important;
    height: 90% !important;
    object-fit: contain !important;
}

.project-card:hover .project-img-wrapper,
.project-card:hover:nth-child(1) .project-img-wrapper,
.project-card:hover:nth-child(2) .project-img-wrapper,
.project-card:hover:nth-child(3) .project-img-wrapper,
html[data-theme="light"] .project-card:hover .project-img-wrapper,
html[data-theme="light"] .project-card:hover:nth-child(1) .project-img-wrapper,
html[data-theme="light"] .project-card:hover:nth-child(2) .project-img-wrapper,
html[data-theme="light"] .project-card:hover:nth-child(3) .project-img-wrapper {
    transform: translateY(-4px) !important;
    transition: transform 0.4s ease;
    box-shadow: none !important;
    filter: none !important;
}

/* Slightly tighter proof copy rhythm after shorter texts. */

.proof-item p {
    font-size: 1rem;
    color: var(--muted-strong);
    line-height: 1.6;
    max-width: 25ch !important;
}

@media (max-width: 720px) {
    .side-nav {
        display: none !important;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) .service-header {
        min-height: 128px !important;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) h3 {
        font-size: clamp(2.15rem, 12vw, 3.25rem) !important;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) .service-header-subtitle {
        opacity: 0.46 !important;
    }

    .section-heading {
        padding-inline: 20px;
    }

    .section-heading .section-subtitle {
        max-width: calc(100vw - 56px) !important;
        font-size: clamp(0.98rem, 4vw, 1.08rem) !important;
        line-height: 1.55 !important;
    }

    .contact-hero {
        padding-top: clamp(4.8rem, 16vw, 7rem) !important;
        padding-bottom: 4.8rem !important;
    }

    .contact-layout {
        width: min(100% - 40px, 440px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2.4rem !important;
        margin-inline: auto !important;
    }

    .contact-visual {
        order: -1 !important;
        width: min(58vw, 210px) !important;
        max-width: 210px !important;
        align-self: flex-start !important;
        margin: 0 0 0.35rem 0 !important;
        padding: 0.35rem !important;
    }

    .contact-visual img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
    }

    .contact-content {
        width: 100% !important;
    }

    .contact-info-list {
        margin: 0 !important;
        gap: 2.25rem !important;
    }

    .contact-info-item:last-child .info-value {
        white-space: normal !important;
    }

    .contact-back {
        margin-top: 3.7rem !important;
        margin-bottom: 2.2rem !important;
    }

    .hero-scroll {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        bottom: -4rem !important;
        position: absolute !important;
        writing-mode: initial !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: auto !important;
        opacity: 0.6 !important;
    }

    .scroll-text {
        writing-mode: vertical-lr !important;
        flex-direction: row !important;
        letter-spacing: 0.4em !important;
        display: flex !important;
        gap: 2px !important;
        align-items: center !important;
        font-size: 0.55rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--muted) !important;
        white-space: normal !important;
    }

    .scroll-line {
        width: 1px !important;
        height: 40px !important;
        background: linear-gradient(to bottom, var(--muted), transparent) !important;
        margin-inline: auto !important;
        margin: 0 !important;
    }

    .detail-modal-card h3 {
        max-width: none;
        font-size: clamp(2.55rem, 12vw, 4.2rem);
    }

    .tag-more-wrap {
        justify-content: flex-start;
    }

    .tag-more,
    .tag-more--link {
        width: 100%;
    }

    .detail-modal-card {
        padding: 1.15rem 1rem 2rem;
        padding-inline: clamp(1rem, 5vw, 1.5rem) !important;
    }

    .detail-modal-topline {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.9rem;
        margin-bottom: 2rem !important;
    }

    .detail-modal-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .detail-modal-lead {
        text-align: left !important;
        font-size: clamp(1.06rem, 4vw, 1.22rem) !important;
        line-height: 1.6 !important;
    }

    .detail-modal-bottom-cta .btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .detail-modal-card>h3 {
        font-size: clamp(2.6rem, 12vw, 4.35rem) !important;
        max-width: 100% !important;
        line-height: 1.1 !important;
        letter-spacing: -0.055em !important;
    }

    .detail-modal-cta,
    .detail-modal-bottom-cta .btn {
        white-space: normal !important;
    }
}

/* =========================================================
   V24: modal polish, safe mobile controls, clearer info rhythm
   ========================================================= */

/* Keep all micro CTA links inside their cards and away from borders. */

.service-tag .tag-more-wrap,
.tag-more-wrap {
    justify-content: flex-start !important;
    padding-left: min(56%, calc(100% - 15.5rem)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: clamp(1.1rem, 2vw, 1.55rem) !important;
    padding-right: clamp(0.75rem, 1.6vw, 1.25rem) !important;
    margin-bottom: clamp(0.35rem, 0.9vw, 0.65rem) !important;
}

.service-tag .tag-more,
.service-tag .tag-more--link,
.tag-more,
.tag-more--link {
    white-space: nowrap !important;
    font-size: clamp(0.68rem, 0.72vw, 0.82rem) !important;
    line-height: 1 !important;
    padding-top: 0.62rem !important;
    padding-bottom: 0.62rem !important;
}

/* The modal is a full-screen page layer: no inner frame, no clipped top edge. */

.detail-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: block !important;
    place-items: center;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease, visibility 0.28s ease !important;
    align-items: stretch;
    justify-content: stretch;
    visibility: hidden !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    contain: none !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* Full-width top fade so controls never sit on top of text and no short black stripe remains. */

.detail-modal-topline::before,
.detail-modal-topline::after {
    display: none !important;
    content: none !important;
}

.detail-modal-actions {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.8rem, 1.4vw, 1.1rem) !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
}

/* Top CTA remains a free text action, not a pill button. */

.detail-modal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem !important;
    padding: 0.4rem 0.1rem 0.58rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none;
    font-size: clamp(0.74rem, 0.82vw, 0.95rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.detail-modal-cta::after {
    bottom: 0.22rem !important;
    opacity: 0.42 !important;
}

.detail-modal-cta:hover,
.detail-modal-cta:focus-visible {
    background: color-mix(in srgb, var(--modal-accent, #d7b79f) 16%, rgba(255, 255, 255, 0.035)) !important;
    transform: translateY(-1px) !important;
    color: color-mix(in srgb, var(--modal-accent, #d7b79f) 58%, #ffffff 42%) !important;
}

/* Close control gets its own safe space and never overlaps the headline. */

/* Headline spacing/line-height for Czech diacritics. */

.detail-modal-lead {
    max-width: 940px !important;
    margin: 0 0 1.25rem;
    font-size: clamp(1.16rem, 1.75vw, 1.55rem) !important;
    line-height: 1.62 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    margin-bottom: clamp(2rem, 3.6vw, 3.2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: balance !important;
}

/* Three opening bubbles should share one base look. */

.detail-modal-copy p,
.detail-modal-copy p:nth-child(2) {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: radial-gradient(circle at 84% 15%, rgba(255, 255, 255, 0.045), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.02)) !important;
    box-shadow: none !important;
}

/* Fifth bubble = pricing panel. It should be the one with more emphasis. */

.detail-modal-info-grid .detail-modal-panel:nth-child(1) {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: radial-gradient(circle at 84% 15%, rgba(255, 255, 255, 0.045), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.02)) !important;
}

.detail-modal-info-grid .detail-modal-panel:nth-child(2) {
    border-color: color-mix(in srgb, var(--modal-accent, #d7b79f) 68%, rgba(255, 255, 255, 0.2)) !important;
    background: radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.14), transparent 42%),
        radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--modal-accent, #d7b79f) 16%, transparent), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--modal-accent, #d7b79f) 20%, rgba(255, 255, 255, 0.055)), rgba(255, 255, 255, 0.03)) !important;
    box-shadow: 0 20px 70px color-mix(in srgb, var(--modal-accent, #d7b79f) 13%, rgba(0, 0, 0, 0.42)),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Bottom CTA: large, free, editorial and centered. */

.detail-modal-bottom-cta .btn::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0.05rem !important;
    width: min(78%, 520px) !important;
    height: 1px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--modal-accent, #d7b79f) 72%, #fff 28%), transparent) !important;
    opacity: 0.78 !important;
}

.detail-modal-bottom-cta .btn::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 120% !important;
    height: 180% !important;
    transform: translate(-50%, -50%) scale(0.92) !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--modal-accent, #d7b79f) 14%, transparent), transparent 64%) !important;
    opacity: 0 !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.detail-modal-bottom-cta .btn:hover::after,
.detail-modal-bottom-cta .btn:focus-visible::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Mobile: reserve a readable top area and stop the controls from colliding with text/content. */

/* =========================================================
   V25: fullscreen detail cleanup — CTA, close, top fade, mobile media
   ========================================================= */

/* Fullscreen modal must begin visually at the absolute top, without a floating band. */

.detail-modal-card {
    position: relative !important;
    width: 100vw !important;
    max-height: none !important;
    overflow: auto;
    border-radius: 0 !important;
    border: 0 !important;
    background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--modal-accent, #d7b79f) 23%, transparent), transparent 32%),
        radial-gradient(circle at 18% 90%, rgba(255, 255, 255, 0.05), transparent 34%),
        linear-gradient(135deg, rgba(9, 9, 10, 0.99), rgba(19, 18, 18, 0.98) 48%, rgba(44, 35, 29, 0.93)) !important;
    color: #f4f1ed !important;
    box-shadow: none !important;
    padding: clamp(1.1rem, 2.2vw, 2rem) clamp(1.1rem, 4.6vw, 5.25rem) clamp(4rem, 7vw, 7rem) !important;
    transform: none !important;
    transition: transform 0.28s ease;
    z-index: 1 !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow-y: auto !important;
    height: 100dvh !important;
    max-width: none !important;
    min-width: 100vw !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
}

.detail-modal-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-bottom: clamp(2.2rem, 4.8vw, 4.2rem) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    padding-bottom: clamp(1.15rem, 2vw, 1.85rem) !important;
    background: linear-gradient(180deg,
            rgba(7, 7, 8, 1) 0%,
            rgba(8, 8, 9, 0.98) 28%,
            rgba(12, 11, 11, 0.82) 58%,
            rgba(17, 15, 15, 0.36) 82%,
            rgba(17, 15, 15, 0) 100%) !important;
    max-width: 100vw !important;
    margin: 0 auto clamp(2rem, 4vw, 3.4rem) !important;
    padding: clamp(0.85rem, 1.5vw, 1.25rem) clamp(1.1rem, 4.6vw, 5.25rem) clamp(1rem, 1.7vw, 1.45rem) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    width: 100vw !important;
    margin-left: calc(clamp(1.1rem, 4.6vw, 5.25rem) * -1) !important;
    margin-right: calc(clamp(1.1rem, 4.6vw, 5.25rem) * -1) !important;
    border: 0 !important;
}

/* Keep heading below the sticky fade after removing top card padding. */

.detail-modal-card>h3 {
    width: 100% !important;
    max-width: min(16.8ch, 100%) !important;
    font-size: clamp(3.2rem, 6.6vw, 7.25rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.058em !important;
    margin-bottom: clamp(1.15rem, 2.4vw, 2.2rem) !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
    padding-top: 0.1em !important;
    overflow: visible !important;
    margin-top: clamp(2.1rem, 5vw, 5.3rem) !important;
}

/* Top close: no outlined circle, just a clean editorial close control. */

.detail-modal-close {
    width: clamp(2.65rem, 4vw, 3.55rem) !important;
    height: clamp(2.65rem, 4vw, 3.55rem) !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-items: center !important;
    line-height: 1 !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
    flex: 0 0 auto !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

.detail-modal-close span {
    display: block !important;
    transform: translateY(-0.05em) !important;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem) !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

.detail-modal-close:hover,
.detail-modal-close:focus-visible {
    transform: rotate(90deg) scale(1.06) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--modal-accent, #d7b79f) 52%, rgba(255, 255, 255, 0.18)) !important;
    color: color-mix(in srgb, var(--modal-accent, #d7b79f) 42%, white 58%) !important;
    border: 0 !important;
}

/* Bottom CTA: remove the box/shadow/underline and leave a clean strong text action. */

.detail-modal-bottom-cta {
    margin-top: clamp(3.2rem, 6.2vw, 6.6rem) !important;
    display: flex !important;
    justify-content: center !important;
    padding-bottom: clamp(2.2rem, 4.8vw, 4.8rem) !important;
}

.detail-modal-bottom-cta .btn {
    min-width: 0 !important;
    min-height: clamp(4.4rem, 7.4vw, 5.85rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: color-mix(in srgb, var(--modal-accent, #d7b79f) 28%, #fff 72%) !important;
    font-size: clamp(2.45rem, 6.6vw, 6.9rem) !important;
    letter-spacing: -0.045em !important;
    box-shadow: none !important;
    width: auto !important;
    font-weight: 900 !important;
    text-align: center !important;
    max-width: 100% !important;
    line-height: 0.92 !important;
    text-transform: uppercase !important;
    position: relative !important;
    text-shadow: none !important;
    filter: none !important;
}

.detail-modal-bottom-cta .btn::before,
.detail-modal-bottom-cta .btn::after {
    display: none !important;
    content: none !important;
}

.detail-modal-bottom-cta .btn:hover,
.detail-modal-bottom-cta .btn:focus-visible {
    transform: translateY(-3px) !important;
    box-shadow: 0 32px 100px color-mix(in srgb, var(--modal-accent, #d7b79f) 32%, rgba(0, 0, 0, 0.55)) !important;
    color: #fff !important;
}

/* Also remove any decorative underline inherited by text CTAs in the modal footer. */

.detail-modal-bottom-cta a,
.detail-modal-bottom-cta a:hover,
.detail-modal-bottom-cta a:focus-visible {
    text-decoration: none !important;
}

/* =========================================================
   V26: mobile CTA centering + remove dark hover box
   ========================================================= */

/* Micro CTAs such as "Jak to funguje" stay clean: no heavy black hover panel. */

.service-tag .tag-more,
.service-tag .tag-more--link,
.tag-more,
.tag-more--link,
.service-tag .tag-more:hover,
.service-tag .tag-more:focus-visible,
.service-tag .tag-more--link:hover,
.service-tag .tag-more--link:focus-visible,
.tag-more:hover,
.tag-more:focus-visible,
.tag-more--link:hover,
.tag-more--link:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

/* Bottom full-screen modal CTA must remain pure editorial text in all states. */

.detail-modal-bottom-cta,
.detail-modal-bottom-cta:hover {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.detail-modal-bottom-cta .btn,
.detail-modal-bottom-cta .btn:hover,
.detail-modal-bottom-cta .btn:focus,
.detail-modal-bottom-cta .btn:focus-visible,
.detail-modal-bottom-cta .btn:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    isolation: auto !important;
    overflow: visible !important;
}

.detail-modal-bottom-cta .btn::before,
.detail-modal-bottom-cta .btn::after,
.detail-modal-bottom-cta .btn:hover::before,
.detail-modal-bottom-cta .btn:hover::after,
.detail-modal-bottom-cta .btn:focus-visible::before,
.detail-modal-bottom-cta .btn:focus-visible::after,
.detail-modal-bottom-cta .btn:active::before,
.detail-modal-bottom-cta .btn:active::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* One-column layout: center the compact text CTAs visually. */

@media (max-width: 760px) {
    .project-img-wrapper {
        width: clamp(138px, 42vw, 176px) !important;
        height: clamp(104px, 31vw, 132px) !important;
    }

    .section-title::before {
        width: 100vw !important;
        font-size: clamp(1.35em, 30vw, 2.15em) !important;
        opacity: 0.035 !important;
    }

    .section--services .section-title,
    .section--projects .section-title,
    .section--proof .section-title {
        max-width: min(100%, 9.5ch) !important;
        font-size: clamp(2.55rem, 12.8vw, 4.7rem) !important;
        line-height: 1.06 !important;
    }

    .service-visual-stack img,
    .service-visual img.service-preview-image,
    .service-visual.is-stack .service-visual-stack img {
        aspect-ratio: 16 / 11 !important;
    }

    .service-visual-stack img:nth-child(n+2) {
        display: none !important;
    }

    .section-heading {
        width: min(100%, calc(100vw - 1.25rem)) !important;
        padding-inline: 0.75rem !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle,
    .section--services .section-subtitle,
    .section--projects .section-subtitle,
    .section--proof .section-subtitle {
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        padding-inline: 0.65rem !important;
        font-size: clamp(0.98rem, 3.8vw, 1.08rem) !important;
    }

    .nav ul {
        column-gap: clamp(0.9rem, 4.2vw, 1.35rem) !important;
    }

    .nav a:not(.nav-icon-link) {
        letter-spacing: 0.18em !important;
        font-size: 0.68rem !important;
    }

    .nav-icon-link,
    .theme-toggle {
        transform: translateY(-7px) !important;
    }

    .contact-layout {
        align-items: start !important;
    }

    .contact-visual {
        order: -1 !important;
        width: min(58vw, 260px) !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        margin-bottom: clamp(2rem, 7vw, 3rem) !important;
    }

    .contact-info-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 3.1rem !important;
    }

    .contact-intro {
        margin-bottom: 3.1rem !important;
        gap: 0.85rem !important;
    }

    .contact-title {
        font-size: clamp(2.4rem, 10vw, 3.8rem) !important;
        line-height: 1 !important;
    }

    .service-header {
        padding: clamp(1.4rem, 6vw, 2rem) clamp(1.1rem, 5vw, 1.45rem) !important;
    }

    .service-title-group h3 {
        font-size: clamp(2.35rem, 13vw, 3.9rem) !important;
    }

    .service-header-subtitle {
        font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important;
        max-width: 21rem !important;
    }

    .service-content-inner {
        padding-inline: clamp(0.95rem, 4vw, 1.25rem) !important;
    }

    .service-description>p {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.58 !important;
        margin-bottom: 2rem !important;
    }

    .contact-desc {
        font-size: clamp(1rem, 4.2vw, 1.18rem) !important;
        max-width: min(100%, 32rem) !important;
    }

    .contact-desc-lead,
    .contact-desc-detail {
        display: block !important;
        margin-left: 0 !important;
    }

    .contact-desc-lead {
        font-size: clamp(2.05rem, 10vw, 3.2rem) !important;
        max-width: 10.5ch !important;
    }

    .contact-desc-detail {
        margin-top: 0.35rem !important;
        font-size: clamp(0.98rem, 4vw, 1.12rem) !important;
        max-width: 28rem !important;
    }

    .section-heading>.section-kicker {
        margin-bottom: clamp(0.72rem, 3.2vw, 1.05rem) !important;
    }

    .service-title-group>.section-kicker {
        margin-bottom: clamp(0.65rem, 3vw, 0.95rem) !important;
    }

    .section-title::before,
    .title-services::before {
        width: 100vw !important;
        transform: translate(-50%, -48%) translateY(var(--parallax-y, 0)) scale(0.76) !important;
    }

    .hero-title--domain {
        transform: translateX(clamp(0.55rem, 5.4vw, 1.6rem)) !important;
        letter-spacing: -0.04em !important;
    }

    .hero-title--domain>span:first-child {
        letter-spacing: -0.04em !important;
    }

    .hero-title--domain .hero-dotco {
        margin-left: 0.015em !important;
        letter-spacing: 0.01em !important;
    }

    .hero-desc--identity {
        max-width: 90vw !important;
        font-size: clamp(1.02rem, 4vw, 1.18rem) !important;
        line-height: 1.62 !important;
    }

    .service-item .plus-btn,
    .service-header .plus-btn {
        flex: 0 0 auto !important;
        margin-left: 0.75rem !important;
        align-self: flex-start !important;
    }

    .detail-modal-actions {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 1rem !important;
    }

    .detail-modal-cta {
        max-width: calc(100% - 4.2rem) !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        padding-top: 0.5rem !important;
    }

    .detail-modal-copy {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .detail-modal-info-grid {
        grid-template-columns: 1fr !important;
    }

    .detail-modal-media {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .detail-modal-media img,
    .detail-modal-media img:nth-child(1),
    .detail-modal-media img:nth-child(2) {
        height: auto !important;
        transform: none !important;
        aspect-ratio: auto !important;
    }

    .detail-modal-card {
        padding: 0 1rem 3.5rem !important;
        padding-top: 0 !important;
    }

    .detail-modal-topline {
        width: 100vw !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding: 1rem 1rem 3.3rem !important;
        align-items: flex-start !important;
        gap: 0.9rem !important;
        background: linear-gradient(180deg,
                rgba(7, 7, 8, 1) 0%,
                rgba(8, 8, 9, 0.98) 34%,
                rgba(11, 10, 10, 0.84) 64%,
                rgba(12, 11, 11, 0.36) 86%,
                rgba(12, 11, 11, 0) 100%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        max-width: 100vw !important;
        padding-top: max(0.95rem, env(safe-area-inset-top)) !important;
        padding-bottom: 3rem !important;
    }

    .detail-modal-card>h3 {
        margin-top: 0.7rem !important;
        font-size: clamp(2.45rem, 12vw, 4.55rem) !important;
        line-height: 1.12 !important;
        max-width: 100% !important;
    }

    .detail-modal-close {
        width: 2.9rem !important;
        height: 2.9rem !important;
    }

    /* In one-column detail layout show only one photo. If a second one exists, prefer the second. */

    .detail-modal-media:has(img:nth-child(2)) img:first-child {
        display: none !important;
    }

    .detail-modal-media img:nth-child(n+3) {
        display: none !important;
    }

    .detail-modal-media:has(img:nth-child(2)) img:nth-child(2) {
        display: block !important;
    }

    .service-tag .tag-more-wrap,
    .tag-more-wrap {
        padding-left: 0 !important;
        justify-content: center !important;
        padding-right: 0 !important;
        margin-top: 1rem !important;
        margin-bottom: 1.15rem !important;
        display: flex !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .service-tag .tag-more,
    .service-tag .tag-more--link,
    .tag-more,
    .tag-more--link {
        width: auto !important;
        max-width: min(100%, 18rem) !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
        padding: 0.7rem 0 !important;
        justify-content: center !important;
        margin-inline: auto !important;
    }

    .detail-modal-bottom-cta {
        justify-content: center !important;
        text-align: center !important;
    }

    .detail-modal-bottom-cta .btn {
        font-size: clamp(2.25rem, 13vw, 4.2rem) !important;
        line-height: 0.96 !important;
        text-align: center !important;
        margin-inline: auto !important;
        max-width: 100% !important;
    }
}

/* PORTFOLIO DETAIL PAGES ONLY */

.portfolio-detail-page {
    color-scheme: dark;
    --portfolio-bg: #0a0a0c;
    --portfolio-text: #f4f1ed;
    --portfolio-accent: #d7b79f;
    --portfolio-muted: rgba(255, 255, 255, 0.6);
    --portfolio-border: rgba(255, 255, 255, 0.08);
    background-color: var(--portfolio-bg);
    color: var(--portfolio-text);
}

.portfolio-detail-page .portfolio-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 10, 12, 0.96), rgba(10, 10, 12, 0.82), rgba(10, 10, 12, 0));
    padding: 1.5rem 0;
}

.portfolio-detail-page .portfolio-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-detail-page .portfolio-logo {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--portfolio-text);
    text-decoration: none;
}

.portfolio-detail-page .portfolio-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.portfolio-detail-page .portfolio-nav a {
    color: var(--portfolio-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.portfolio-detail-page .portfolio-nav a:hover {
    color: var(--portfolio-accent);
}

.portfolio-detail-page .portfolio-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2rem 6rem;
}

.portfolio-detail-page .portfolio-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
    margin-top: 2rem;
}

.portfolio-detail-page .portfolio-hero-title {
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.portfolio-detail-page .portfolio-hero-subtitle {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: var(--portfolio-muted);
    margin-bottom: 2.5rem;
    max-width: 480px;
}

.portfolio-detail-page .portfolio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 999px;
    background: transparent;
    color: var(--portfolio-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--portfolio-border);
    transition: all 0.3s ease;
}

.portfolio-detail-page .portfolio-btn:hover {
    background: var(--portfolio-text);
    color: var(--portfolio-bg);
}

.portfolio-detail-page .portfolio-btn-primary {
    background: var(--portfolio-text);
    color: var(--portfolio-bg);
}

.portfolio-detail-page .portfolio-btn-primary:hover {
    background: transparent;
    color: var(--portfolio-text);
}

.portfolio-detail-page .portfolio-hero-image img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    border-radius: 1.5rem;
}

.portfolio-detail-page .portfolio-intro {
    max-width: 800px;
    margin: 0 auto 6rem;
    text-align: center;
}

.portfolio-detail-page .portfolio-intro-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.portfolio-detail-page .portfolio-intro-text p {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    color: var(--portfolio-muted);
    margin-bottom: 1.5rem;
}

.portfolio-detail-page .portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    gap: 1.5rem;
    margin-bottom: 6rem;
}

.portfolio-detail-page .portfolio-gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
}

.portfolio-detail-page .portfolio-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-detail-page .portfolio-gallery-item:hover img {
    transform: scale(1.05);
}

/* Irregular grid patterns */

.portfolio-detail-page .item-0 {
    grid-column: span 2;
    grid-row: span 2;
}

.portfolio-detail-page .item-1 {
    grid-column: span 1;
    grid-row: span 1;
}

.portfolio-detail-page .item-2 {
    grid-column: span 1;
    grid-row: span 1;
}

.portfolio-detail-page .item-3 {
    grid-column: span 1;
    grid-row: span 2;
}

.portfolio-detail-page .item-4 {
    grid-column: span 2;
    grid-row: span 1;
}

.portfolio-detail-page .portfolio-detail-section {
    max-width: 800px;
    margin: 0 auto 6rem;
}

.portfolio-detail-page .portfolio-detail-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--portfolio-border);
    border-radius: 1.5rem;
    padding: 3rem;
}

.portfolio-detail-page .portfolio-detail-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.portfolio-detail-page .portfolio-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portfolio-detail-page .portfolio-detail-list li {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--portfolio-muted);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--portfolio-border);
}

.portfolio-detail-page .portfolio-detail-list li:last-child {
    border-bottom: none;
}

.portfolio-detail-page .portfolio-cta-section {
    text-align: center;
    padding: 6rem 0;
}

@media (max-width: 960px) {
    .portfolio-detail-hero {
        grid-template-columns: 1fr;
    }

    .detail-modal-media,
    .portfolio-detail-gallery {
        grid-template-columns: 1fr;
    }

    .portfolio-detail-page .portfolio-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .portfolio-detail-page .portfolio-hero-image img {
        height: 50vh;
    }

    .portfolio-detail-page .portfolio-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
    }

    .portfolio-detail-page .item-0 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .portfolio-detail-page .item-1 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .portfolio-detail-page .item-2 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .portfolio-detail-page .item-3 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .portfolio-detail-page .item-4 {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    .portfolio-detail-page .portfolio-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .portfolio-detail-page .portfolio-gallery-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .portfolio-detail-page .portfolio-gallery-item img {
        height: 400px;
    }

    .portfolio-detail-page .portfolio-header-inner {
        padding: 0 1rem;
    }

    .portfolio-detail-page .portfolio-main {
        padding: 1rem 1rem 4rem;
    }

    .portfolio-detail-page .portfolio-detail-box {
        padding: 1.5rem;
    }
}

/* PORTFOLIO DETAIL PAGES ONLY - CUSTOM REFERENCE LAYOUT */

body.portfolio-detail-page {
    background: linear-gradient(120deg, #14161a, #1d1a18, #161917, #18161a);
    background-size: 400% 400%;
    animation: portraitBg 30s ease infinite;
}

@keyframes portraitBg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.portfolio-detail-page .portfolio-ref-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 5vw 6rem;
}

.portfolio-detail-page .portfolio-ref-hero {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.portfolio-detail-page .portfolio-ref-hero-titles {
    max-width: 900px;
    margin: 0;
    text-align: left;
    padding: 6rem 0 2rem;
}

.portfolio-detail-page .portfolio-ref-hero-heading {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    line-height: 1;
}

.portfolio-detail-page .portfolio-ref-hero-subheading {
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
    line-height: 1.6;
    color: var(--muted-strong);
    max-width: 800px;
}

.portfolio-detail-page .muted-italic {
    color: var(--muted);
    font-style: italic;
    font-size: 0.9em;
}

.portfolio-detail-page .portfolio-ref-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4vw;
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
}

.portfolio-detail-page .portfolio-ref-section {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.8s var(--ease-premium), filter 0.8s var(--ease-premium), box-shadow 0.8s var(--ease-premium);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.portfolio-detail-page .portfolio-ref-section:hover {
    transform: scale(0.97) translateY(-5px);
    filter: brightness(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.portfolio-detail-page .portfolio-ref-section img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 1.2s var(--ease-premium);
}

.portfolio-detail-page .portfolio-ref-section:hover img {
    transform: scale(1.03);
}

/* Grid Layout Templates - More Random */

.portfolio-detail-page .ref-tpl-1 {
    grid-column: 2 / 12;
    margin-top: -2rem;
}

.portfolio-detail-page .ref-tpl-2 {
    grid-column: 4 / 10;
    margin-top: -3rem;
}

.portfolio-detail-page .ref-tpl-3 {
    grid-column: 7 / 13;
    margin-top: 4rem;
}

.portfolio-detail-page .ref-tpl-4 {
    grid-column: 1 / 8;
    margin-top: -1rem;
}

.portfolio-detail-page .ref-tpl-5 {
    grid-column: 3 / 8;
    margin-top: 5rem;
}

.portfolio-detail-page .ref-tpl-6 {
    grid-column: 2 / 7;
    margin-top: -2rem;
}

.portfolio-detail-page .ref-tpl-7 {
    grid-column: 6 / 12;
    margin-top: 1rem;
}

.portfolio-detail-page .ref-tpl-8 {
    grid-column: 5 / 10;
    margin-top: -4rem;
}

/* Contextual Nav / Separators */

.portfolio-detail-page .portfolio-ref-nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 7rem 0;
    text-align: left;
    scroll-margin-top: 140px;
}

.portfolio-detail-page .portfolio-ref-nav-title h3 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.portfolio-detail-page .portfolio-ref-nav-title {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color: var(--muted-strong);
    max-width: 800px;
    margin: 0;
}

.portfolio-detail-page .portfolio-ref-nav-title p {
    margin-bottom: 2.5rem;
}

.portfolio-detail-page .portfolio-ref-nav-content {
    max-width: 900px;
    margin: 0;
    text-align: left;
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    line-height: 1.7;
    color: var(--muted-strong);
}

.portfolio-detail-page .portfolio-ref-nav-content h3 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text);
}

.portfolio-detail-page .portfolio-ref-nav-content p {
    margin-bottom: 1.5rem;
}

.portfolio-detail-page .portfolio-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    margin-top: 1rem;
    transition: all 0.4s var(--ease-premium);
    position: relative;
}

.portfolio-detail-page .portfolio-text-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 1px;
    background: currentColor;
    transition: width 0.4s var(--ease-premium);
}

.portfolio-detail-page .portfolio-text-link span {
    transition: transform 0.4s var(--ease-premium);
}

.portfolio-detail-page .portfolio-text-link:hover {
    color: #fff;
}

.portfolio-detail-page .portfolio-text-link:hover::after {
    width: 100%;
}

.portfolio-detail-page .portfolio-text-link:hover span {
    transform: translateX(4px);
}

.portfolio-detail-page .final-nav {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .plus-btn::before {
        width: 12px;
    }

    .plus-btn::after {
        height: 12px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: left;
        gap: 1.5rem;
    }

    .nav {
        display: none;
    }

    .hero-title {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    /* Removed hardcoded h3 font-size to allow clamp() scaling */

    .plus-btn {
        width: 48px;
        height: 48px;
        margin-left: 0;
    }

    .service-header[aria-expanded="true"] {
        padding-bottom: 2rem;
    }

    .contact-info-list {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .service-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .btn {
        width: 100%;
    }

    .container,
    .header-inner,
    .footer-2 .container {
        width: calc(100% - 40px);
    }

    .header-inner {
        align-items: center;
    }

    .hero {
        min-height: 92vh;
    }

    .hero-signature-canvas {
        width: min(340px, 82vw);
        height: 86px;
        opacity: 0.22;
    }

    .hero-scroll {
        left: 20px;
        bottom: -2rem;
    }

    .section-heading .section-title {
        font-size: clamp(2.65rem, 14vw, 4.8rem);
    }

    .service-item {
        padding-inline: 1.15rem;
        margin-inline: 0;
    }

    .service-title-group {
        max-width: 100%;
    }

    .service-header {
        padding: 3rem 0;
        grid-template-columns: 1fr auto;
        gap: 1rem;
        padding-block: 2.35rem;
    }

    .service-item h3 {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }

    .service-header-subtitle {
        max-width: 34ch;
    }

    .service-content-inner {
        padding-bottom: 3.5rem;
    }

    .service-description p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .service-visual {
        aspect-ratio: 16/10;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        gap: 3.25rem;
    }

    .project-desc {
        max-width: 32ch;
    }

    .proof-grid {
        gap: 1.25rem;
    }

    .proof-item {
        padding: 2.4rem 1.55rem;
    }

    .footer-cta h2 {
        max-width: 13ch;
    }

    :root {
        --gutter: 22px;
        --section-padding: clamp(4rem, 12vw, 6rem);
        --safe-width: calc(100% - 40px);
    }

    .theme-toggle-mobile {
        display: inline-flex;
        margin-left: auto;
    }

    .portfolio-detail-page .portfolio-ref-gallery {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .portfolio-detail-page .portfolio-ref-nav {
        padding: 4rem 1rem;
        text-align: left;
    }

    .portfolio-detail-page .portfolio-ref-hero-titles {
        padding: 6.5rem 1rem 1rem;
        text-align: left;
    }

    .portfolio-detail-page [class*="ref-tpl-"] {
        margin-top: 0 !important;
    }
}

/* =========================================================
   PORTFOLIO DETAIL PAGES ONLY - VZDUCH EDITORIAL POLISH
   ========================================================= */

/* Hero & Typography */

.portfolio-detail-page .portfolio-elegant-subheading {
    max-width: 48rem;
    margin-top: 2rem;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.8;
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
}

.portfolio-detail-page .portfolio-elegant-subheading p {
    margin-bottom: 1.25rem;
}

.portfolio-detail-page .portfolio-elegant-subheading .muted-italic {
    font-style: italic;
    opacity: 0.6;
    font-size: 0.9em;
}

/* Timeline Navigation (Desktop Only) */

.portfolio-detail-page .portfolio-timeline {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
}

.portfolio-detail-page .portfolio-timeline ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-end;
    pointer-events: auto;
}

.portfolio-detail-page .timeline-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.portfolio-detail-page .timeline-label {
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.portfolio-detail-page .timeline-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.portfolio-detail-page .timeline-link:hover,
.portfolio-detail-page .timeline-link.is-active {
    color: var(--text-main, #fff);
}

.portfolio-detail-page .timeline-link:hover .timeline-label,
.portfolio-detail-page .timeline-link.is-active .timeline-label {
    opacity: 1;
    transform: translateX(0);
}

.portfolio-detail-page .timeline-link.is-active .timeline-dot {
    transform: scale(2);
    background: var(--tag-accent, #98b4c8);
}

/* Editorial Gallery Grid */

.portfolio-detail-page .portfolio-editorial-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    align-items: center;
}

.portfolio-detail-page .portfolio-editorial-gallery>* {
    grid-column: span 12;
}

.portfolio-detail-page .portfolio-editorial-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: block;
}

/* Grid Spans (Desktop) */

/* Mobile Fallback: Stacked, no horizontal scroll */

@media (max-width: 900px) {
    .section-heading {
        margin-bottom: clamp(3.2rem, 10vw, 5rem);
    }

    .section-title::before {
        font-size: 1.35em;
        opacity: 0.022;
    }

    .service-item:not(:has(.service-header[aria-expanded="true"])) .service-header,
    .service-header[aria-expanded="true"] {
        padding-inline: clamp(1.25rem, 6vw, 2rem);
    }

    .service-content-inner {
        padding-inline: clamp(1.25rem, 6vw, 2rem);
    }

    .contact-visual {
        max-width: min(360px, 84vw);
        margin-inline: auto;
    }

    .contact-visual img {
        max-height: 440px;
    }

    body {
        padding-top: 0 !important;
    }

    .header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 1.25rem 0 0.72rem 0 !important;
        /* Offset from top */
        background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
        backdrop-filter: blur(18px) saturate(112%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent) !important;
        z-index: 200 !important;
        border-bottom-color: color-mix(in srgb, var(--line) 58%, transparent) !important;
    }

    .nav {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav::-webkit-scrollbar {
        display: none !important;
    }

    .side-nav {
        display: none !important;
    }

    .nav a:not(.nav-icon-link),
    .theme-toggle {
        font-size: 0.54rem !important;
        letter-spacing: 0.17em !important;
        height: 24px !important;
        line-height: 24px !important;
    }

    .header-inner {
        width: min(100% - 16px, var(--layout-max)) !important;
        justify-content: center !important;
        overflow: hidden !important;
        margin-inline: auto !important;
    }

    .nav ul {
        width: max-content !important;
        min-width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(0.72rem, 3vw, 1.2rem) !important;
        padding-inline: 0.25rem !important;
        column-gap: clamp(0.7rem, 2.8vw, 1rem) !important;
    }

    .nav a:not(.nav-icon-link),
    .theme-toggle,
    .nav-icon-link {
        font-size: 0.65rem !important;
        letter-spacing: 0.18em !important;
    }

    .section--services .section-title,
    .section--projects .section-title,
    .section--proof .section-title {
        font-size: clamp(2.8rem, 12vw, 5.6rem) !important;
    }

    .section-subtitle,
    .section-heading .section-subtitle,
    .service-header-subtitle {
        font-size: clamp(0.98rem, 3.8vw, 1.16rem) !important;
        max-width: min(86vw, 28rem) !important;
    }

    .service-details {
        grid-template-columns: 1fr !important;
    }

    .service-visual {
        order: -1 !important;
        min-height: 300px !important;
        display: none !important;
    }

    .service-tag.is-open .tag-body {
        max-height: 1500px !important;
    }

    .tag-media {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
        padding: 0 clamp(1.15rem, 5vw, 1.75rem) clamp(1.15rem, 5vw, 1.75rem) !important;
        margin-top: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    .tag-media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: clamp(10px, 3vw, 16px) !important;
        background: color-mix(in srgb, var(--tag-accent, #d7b79f) 10%, var(--bg)) !important;
    }

    .detail-modal {
        padding: 0.85rem;
    }

    .detail-modal-card {
        max-height: 88vh;
        border-radius: 20px;
    }

    .detail-modal-cta {
        max-width: 11rem;
        text-align: center;
        line-height: 1.2;
    }

    .detail-modal-media {
        grid-template-columns: 1fr;
    }

    .detail-modal-card h3 {
        max-width: 9ch;
        font-size: clamp(2rem, 12vw, 3.6rem);
    }

    .detail-modal-topline {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .detail-modal-actions {
        gap: 0.5rem;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .detail-modal-copy,
    .detail-modal-info-grid,
    .detail-modal-media {
        grid-template-columns: 1fr !important;
    }

    .detail-modal-lead {
        margin-left: auto !important;
        max-width: 100% !important;
    }

    .detail-modal-media img {
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        background: rgba(255, 255, 255, 0.02) !important;
    }

    .tag-more-wrap {
        justify-content: flex-start !important;
        margin-top: 0.9rem;
    }

    .portfolio-detail-page .portfolio-timeline {
        display: none;
    }

    .portfolio-detail-page .portfolio-editorial-gallery {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2rem;
        overflow-x: hidden;
    }

    .portfolio-detail-page .portfolio-editorial-gallery>* {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Structured Information Blocks */

.portfolio-detail-page .portfolio-info-note {
    font-style: italic;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* Final Reservation CTA */

.portfolio-detail-page .portfolio-final-cta {
    margin: 6rem 0 4rem;
    text-align: center;
    padding: clamp(3rem, 6vw, 6rem) 1rem;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 60%);
    border-radius: 24px;
    scroll-margin-top: 140px;
}

.portfolio-detail-page .portfolio-cta-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    line-height: 1;
    margin: 1rem auto 1.5rem;
    max-width: 20ch;
}

.portfolio-detail-page .portfolio-cta-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.portfolio-detail-page .portfolio-cta-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0 2.5rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-detail-page .portfolio-cta-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
}

/* Hero image size */

@media (min-width: 901px) {
    .portfolio-detail-page .header {
        display: none !important;
    }

    .portfolio-detail-page .side-nav {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(-50%) !important;
    }

    .section-subtitle {
        max-width: min(680px, calc(100vw - 210px)) !important;
    }

    .header.header--hidden {
        transform: translateY(-115%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .service-details {
        grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.78fr) !important;
        align-items: start !important;
    }

    .service-visual-stack img:nth-child(n+2) {
        display: none !important;
    }

    .service-visual {
        display: flex !important;
        position: sticky !important;
        top: clamp(5rem, 8vw, 8rem) !important;
        overflow: hidden !important;
        border-radius: clamp(12px, 1.2vw, 18px) !important;
        background: color-mix(in srgb, var(--panel) 84%, transparent) !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .service-visual-stack {
        display: block !important;
        width: min(100%, 440px) !important;
        height: auto !important;
        max-height: none !important;
    }

    .service-visual-stack img,
    .service-visual img.service-preview-image {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: transparent !important;
        border-radius: clamp(12px, 1.2vw, 18px) !important;
        display: block !important;
    }

    .portfolio-detail-page .portfolio-img-span-4 {
        grid-column: span 4;
    }

    .portfolio-detail-page .portfolio-img-span-5 {
        grid-column: span 5;
    }

    .portfolio-detail-page .portfolio-img-span-6 {
        grid-column: span 6;
    }

    .portfolio-detail-page .portfolio-img-span-7 {
        grid-column: span 7;
    }

    .portfolio-detail-page .portfolio-img-span-8 {
        grid-column: span 8;
    }

    .portfolio-detail-page .portfolio-span-full {
        grid-column: span 12;
    }

    /* Overlaps and Offsets */

    .portfolio-detail-page .portfolio-overlap-up {
        margin-top: -4rem;
        z-index: 2;
    }

    .portfolio-detail-page .portfolio-overlap-left {
        margin-left: -2rem;
        z-index: 2;
    }

    .portfolio-detail-page .portfolio-overlap-right {
        margin-right: -2rem;
        z-index: 2;
    }

    .portfolio-detail-page .portfolio-offset-down {
        margin-top: 6rem;
    }

    .portfolio-detail-page .portfolio-img-hero {
        grid-column: 4 / span 6;
    }
}

/* Hover Zoom Effect for Editorial Gallery Images */

.portfolio-detail-page [class*="portfolio-img-span-"],
.portfolio-detail-page .portfolio-img-hero {
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.portfolio-detail-page [class*="portfolio-img-span-"]:hover,
.portfolio-detail-page .portfolio-img-hero:hover {
    transform: scale(0.98) translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.portfolio-detail-page [class*="portfolio-img-span-"] img,
.portfolio-detail-page .portfolio-img-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-premium);
}

.portfolio-detail-page [class*="portfolio-img-span-"]:hover img,
.portfolio-detail-page .portfolio-img-hero:hover img {
    transform: scale(1.04);
}

/* @media (min-width: 768px) { */
/* =========================================================
       INLINE TAG DETAIL (Accordion replacement for modals)
       ========================================================= */

.tag-detail-inline {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-premium), margin 0.4s var(--ease-premium), opacity 0.3s ease;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin-top: 0;
}

.service-tag.is-detail-open .tag-detail-inline {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.tag-detail-content {
    min-height: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Hide the "Zjistit víc" button when open */

.service-tag.is-detail-open .tag-more-wrap {
    display: none;
}

/* Ensure the left border stretches */

.service-tag.is-detail-open {
    border-left-color: var(--tag-accent, #d7b79f);
}

/* Reset modal overrides for inline usage */

.tag-detail-inline .detail-modal-topline {
    position: relative;
    background: transparent;
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
    z-index: 1;
}

.tag-detail-inline .detail-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-detail-inline .detail-modal-info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Structured Information Blocks */

.portfolio-detail-page .portfolio-info-note {
    font-style: italic;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.vzduch-bullet-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.vzduch-bullet-list li {
    padding-left: 1rem;
    border-left: 2px solid var(--tag-accent, var(--modal-accent, #d7b79f));
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.6;
    color: var(--text-muted);
}

.vzduch-bullet-list li strong {
    display: block;
    color: var(--text-main, #fff);
    margin-bottom: 0.25rem;
}

/* =========================================================
       Custom Minimalist Service Tags (No bubbles, left indicator line)
       ========================================================= */

.service-tag,
.service-tag.is-open,
.service-tag.is-current-preview,
.service-tag.is-detail-open,
html[data-theme="light"] .service-tag,
html[data-theme="light"] .service-tag.is-open,
html[data-theme="light"] .service-tag.is-current-preview,
html[data-theme="light"] .service-tag.is-detail-open {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    overflow: visible !important;
}

/* Ensure no radial gradients or before overlays */

.service-tag::before,
.service-tag.is-open::before {
    display: none !important;
    background: none !important;
}

/* Left indicator line */

.service-tag::after {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    /* Centered with the first line of text */
    width: 2px;
    height: 10px;
    /* Short indicator when closed */
    background-color: var(--tag-accent, var(--text));
    opacity: 0.25;
    border-radius: 99px;
    pointer-events: none;
    transition: height 0.6s var(--ease-premium),
        top 0.6s var(--ease-premium),
        opacity 0.4s ease,
        background-color 0.4s ease;
}

/* Hover state */

.service-tag:hover::after {
    opacity: 0.6;
    height: 14px;
    top: 1.1rem;
}

/* Active preview / open state indicator */

.service-tag.is-current-preview::after,
.service-tag.is-open::after,
.service-tag.is-detail-open::after {
    opacity: 1;
    background-color: var(--tag-accent, var(--text));
}

/* When expanded, the line stretches down */

.service-tag.is-open::after,
.service-tag.is-detail-open::after {
    top: 0.95rem;
    /* Align with the top of the header content */
    height: calc(100% - 1.9rem);
}

/* Tighten the padding of the tag header to make it sit nicely */

.service-tag .tag-header {
    padding: 0.95rem 0 0.95rem 1.6rem !important;
    /* Left padding for indent from the line */
    background: transparent !important;
    border: none !important;
    color: var(--muted-strong);
    transition: color 0.3s ease;
}

.service-tag:hover .tag-header,
.service-tag.is-open .tag-header,
.service-tag.is-current-preview .tag-header,
.service-tag.is-detail-open .tag-header {
    color: var(--text) !important;
}

/* Tighten tag content padding */

.service-tag .tag-body {
    transition: max-height 0.7s var(--ease-premium) !important;
}

.service-tag .tag-content {
    padding: 0 0 1.25rem 1.6rem !important;
    color: var(--muted-strong) !important;
}

/* Fix spacing for the Zjistit víc button inside the tag */

.service-tag .tag-more-wrap {
    padding-left: 1.6rem !important;
    margin-bottom: 1.25rem !important;
    margin-top: -0.5rem !important;
}

.service-tag .tag-media {
    padding: 0 0 1.25rem 1.6rem !important;
}

/* Fix spacing for inline details to align with header/content */

.service-tag .tag-detail-inline {
    padding-left: 1.6rem !important;
}

/* Spacing between tags */

.service-tags {
    gap: 0.5rem !important;
}

/* } */

/* =========================================================
   Unified Detail Header Action Links for Standalone Pages
   ========================================================= */

.portfolio-header .detail-modal-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

.portfolio-header .detail-modal-back,
.portfolio-header .detail-modal-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    /* Touch safety padding */
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.98rem !important;
    /* Slightly larger readable font size */
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    transition: color 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Centered underline style like menu */

.portfolio-header .detail-modal-back::after,
.portfolio-header .detail-modal-cta::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 22px !important;
    /* short line */
    height: 1px !important;
    background: currentColor !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.2) !important;
    transition: opacity .25s ease, transform .25s ease !important;
}

.portfolio-header .detail-modal-back:hover::after,
.portfolio-header .detail-modal-cta:hover::after {
    opacity: .8 !important;
    transform: translateX(-50%) scaleX(1) !important;
}

.portfolio-header .detail-modal-back:hover,
.portfolio-header .detail-modal-cta:hover {
    color: #fff !important;
}

/* Keep original Close button style for inline modals on index.php */

.detail-modal-actions .detail-modal-close {
    width: 2.65rem !important;
    height: 2.65rem !important;
    min-height: 2.65rem !important;
    font-size: 1.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
}

.detail-modal-actions .detail-modal-close:hover {
    transform: rotate(90deg) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: color-mix(in srgb, var(--portfolio-accent, var(--modal-accent, #d7b79f)) 50%, rgba(255, 255, 255, 0.28)) !important;
    color: #fff !important;
}

/* =========================================================
   Mobile Detail Headers & Responsive Safety overrides
   ========================================================= */

@media (max-width: 768px) {
    .portfolio-detail-page .portfolio-header-inner {
        justify-content: center !important;
    }

    .portfolio-header .detail-modal-actions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.5rem !important;
        width: auto !important;
    }

    .portfolio-header .section-kicker {
        display: none !important;
    }
}

/* =========================================================
   Aesthetic Refinements (Top menu offset, Hover Wash, Grain, Spacing)
   ========================================================= */

/* Spacing from section titles to subtitles to keep space below the accent lines identical */
.section-title,
.title-services-wrapper {
    margin-bottom: clamp(1.8rem, 3.8vw, 2.5rem) !important;
}

.title-services {
    margin-bottom: 0 !important;
}

/* Dynamic dark anthracite wash for Services section — cool but distinct from projects teal-blue */
.atmosphere-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgb(22 28 38) 0%, #060709 100%) !important;
    opacity: 0;
    transition: opacity 1.2s var(--ease-premium);
    pointer-events: none;
    z-index: 1;
}

html[data-theme="dark"] body[data-section-accent="sand"] .atmosphere-overlay::after {
    opacity: 1;
}

/* Dim the services section background wash slightly when scrolled to it */
body[data-section-accent="sand"] .section--services::before {
    opacity: 0.10 !important;
    transition: opacity 1.2s var(--ease-premium);
}

/* Dynamic blue background wash when scrolled to the projects section */
.atmosphere-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgb(32 59 68) 0%, #001114 100%) !important;
    opacity: 0;
    transition: opacity 1.2s var(--ease-premium);
    pointer-events: none;
    z-index: 2;
}

html[data-theme="dark"] body[data-section-accent="olive"] .atmosphere-overlay::before {
    opacity: 1;
}

/* Dim the project section background gradient slightly when scrolled to projects to amplify the blue wash */
body[data-section-accent="olive"] .section--projects::before {
    opacity: 0.15 !important;
    transition: opacity 1.2s var(--ease-premium);
}

/* Dynamic metallic steel gray wash when scrolled to the proof (Za čím stojím) section */
.page-atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgb(74 85 92) 0%, #0a0c0d 100%) !important;
    opacity: 0;
    transition: opacity 1.2s var(--ease-premium);
    pointer-events: none;
    z-index: 1;
}

html[data-theme="dark"] body[data-section-accent="blue"] .page-atmosphere::before {
    opacity: 1;
}

/* Dim the proof section background wash slightly when active to let the metallic gray wash shine */
body[data-section-accent="blue"] .section--proof::before {
    opacity: 0.15 !important;
    transition: opacity 1.2s var(--ease-premium);
}

/* 
=============================================================================
VIEWPORT-FIXED NOISE/GRAIN OVERLAY (EDITABLE)
=============================================================================
To customize this grain yourself:
- To TURN ON: Change "display: none !important;" below to "display: block !important;" or remove the display rule.
- To change VISIBILITY / INTENSITY: Adjust the "opacity" value (e.g., 0.05 is subtle, 0.1 is strong).
- To change GRAIN SIZE: In the background-image SVG URL, find "baseFrequency='0.6'". 
  Change 0.6 to a smaller number (like 0.2 or 0.3) for LARGER grain, or a larger number (like 0.8) for TINIER grain.
- To change BLUR / SOFTNESS: In the SVG URL, find "stdDeviation='0.5'". 
  Increase 0.5 to blur the grain more, or set it to 0 to make it perfectly sharp/pixelated.
=============================================================================
*/
body::after {
    content: '';
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0' result='mono'/%3E%3CfeGaussianBlur in='mono' stdDeviation='0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 2.475;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 9999;
    display: none !important;
    /* Turned off by default as requested. Change to 'block' to enable. */
}

/* =========================================================
   V27 CMS, theme parity and accessibility corrections
   ========================================================= */

.service-header[role="button"]:focus-visible,
.tag-header:focus-visible,
.theme-toggle:focus-visible,
.nav a:focus-visible,
.side-nav a:focus-visible {
    outline: 2px solid color-mix(in srgb, currentColor 72%, transparent);
    outline-offset: 5px;
}

.detail-theme-toggle {
    display: inline-flex !important;
    width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] body.portfolio-detail-page {
    --portfolio-bg: #e9e8e4;
    --portfolio-text: #151515;
    --portfolio-muted: rgba(0, 0, 0, 0.58);
    --portfolio-border: rgba(0, 0, 0, 0.12);
    --text-main: #151515;
    --text-muted: rgba(0, 0, 0, 0.68);
    background: linear-gradient(120deg, #ecebe7, #e5e2dc, #e8ebe7, #ece8e4) !important;
    color: var(--portfolio-text) !important;
}

html[data-theme="light"] .portfolio-detail-page .portfolio-header {
    background: linear-gradient(180deg, rgba(233, 232, 228, 0.97), rgba(233, 232, 228, 0.84), rgba(233, 232, 228, 0));
}

html[data-theme="light"] .portfolio-header .detail-modal-back,
html[data-theme="light"] .portfolio-header .detail-modal-cta,
html[data-theme="light"] .portfolio-header .detail-theme-toggle {
    color: rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="light"] .portfolio-header .detail-modal-back:hover,
html[data-theme="light"] .portfolio-header .detail-modal-cta:hover,
html[data-theme="light"] .portfolio-header .detail-theme-toggle:hover {
    color: #111 !important;
}

html[data-theme="light"] .portfolio-detail-page .portfolio-info-note,
html[data-theme="light"] .portfolio-detail-page .portfolio-ref-nav {
    color: rgba(0, 0, 0, 0.72);
}

@media (max-width: 820px) {
    .header .nav a,
    .header .nav button {
        height: 44px !important;
        min-height: 44px !important;
        line-height: 44px !important;
        padding-block: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header .nav-icon-link,
    .header .theme-toggle {
        min-width: 32px;
    }

    .tag-more,
    .tag-more--link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* V29 — final cascade layer for the dark-first service and detail direction. */

html[data-theme="dark"] body[data-section-accent="sand"] .atmosphere-overlay::after {
    opacity: 0.62;
}

html[data-theme="dark"] body[data-section-accent="olive"] .atmosphere-overlay::before {
    opacity: 0.55;
}

html[data-theme="dark"] body[data-section-accent="blue"] .page-atmosphere::before {
    opacity: 0.44;
}

body[data-section-accent="sand"] .section--services::before,
body[data-section-accent="olive"] .section--projects::before,
body[data-section-accent="blue"] .section--proof::before {
    opacity: 0.07 !important;
}

.portfolio-detail-page .portfolio-header {
    padding: 1rem 0 !important;
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.97), rgba(8, 9, 11, 0.84), rgba(8, 9, 11, 0)) !important;
}

.portfolio-header .detail-modal-actions {
    gap: 0.75rem !important;
}

.portfolio-header .detail-modal-back,
.portfolio-header .detail-modal-cta {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 1.15rem !important;
    border-radius: 999px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
}

.portfolio-header .detail-modal-back {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.portfolio-header .detail-modal-cta {
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    background: #f5f5f3 !important;
    color: #0a0a0a !important;
}

.portfolio-header .detail-modal-back::after,
.portfolio-header .detail-modal-cta::after {
    display: none !important;
}

.portfolio-header .detail-modal-back:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.portfolio-header .detail-modal-cta:hover {
    color: #000000 !important;
    background: #ffffff !important;
    transform: translateY(-1px);
}

.portfolio-detail-page .portfolio-ref-nav.detail-story-card {
    padding: clamp(2rem, 5vw, 4.5rem) !important;
    border: 1px solid var(--portfolio-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--portfolio-accent) 12%, transparent), transparent 45%),
        rgba(255, 255, 255, 0.018);
}

html[data-theme="light"] .portfolio-header .detail-modal-cta {
    background: #151515 !important;
    color: #f7f6f2 !important;
    border-color: #151515 !important;
}

html[data-theme="light"] .portfolio-header .detail-modal-back {
    color: #151515 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 820px) {
    .portfolio-detail-page .portfolio-header-inner {
        padding-inline: 1rem !important;
    }

    .portfolio-header .detail-modal-actions {
        gap: 0.45rem !important;
    }

    .portfolio-header .detail-modal-back,
    .portfolio-header .detail-modal-cta {
        padding-inline: 0.9rem !important;
        font-size: 0.6rem !important;
    }

    .detail-theme-toggle {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

/* V31 — final cascade guard for the new service navigator. */

.section--services .service-switcher .service-switcher-card {
    border: 1px solid color-mix(in srgb, var(--service-accent) 20%, var(--line)) !important;
    background:
        radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--service-accent) 15%, transparent), transparent 43%),
        linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 86%, transparent), color-mix(in srgb, var(--panel) 35%, transparent)) !important;
}

.section--services .service-switcher .service-switcher-card:hover,
.section--services .service-switcher .service-switcher-card:focus-visible,
.section--services .service-switcher .service-switcher-card.is-active {
    border-color: color-mix(in srgb, var(--service-accent) 58%, var(--line)) !important;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--service-accent) 22%, transparent), transparent 47%),
        linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 100%, transparent), color-mix(in srgb, var(--panel) 56%, transparent)) !important;
}

.service-panel .tag-header:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--service-accent) 58%, transparent) !important;
    outline-offset: -3px !important;
    border-radius: 5px;
}

.service-panel .service-header-subtitle {
    display: block !important;
}

/* =========================================================
   V32 — persistent flow, prepared language UI and detail rhythm
   ========================================================= */

.page-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    opacity: 0.92;
    background:
        radial-gradient(circle at 18% 16%, rgba(132, 164, 187, 0.065), transparent 34%),
        radial-gradient(circle at 82% 74%, rgba(183, 147, 121, 0.055), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.012), transparent 45%, rgba(130, 158, 177, 0.018));
    transition: background 0.9s ease, opacity 0.9s ease;
}

body:not(.portfolio-detail-page):not(.contact-page):not([data-section-accent]) .page-atmosphere::after {
    background:
        radial-gradient(circle at 18% 18%, rgba(91, 146, 185, 0.09), transparent 40%),
        radial-gradient(circle at 80% 76%, rgba(70, 119, 158, 0.052), transparent 44%),
        linear-gradient(145deg, rgba(86, 137, 174, 0.028), transparent 48%, rgba(54, 95, 132, 0.022));
}

body[data-section-accent="sand"] .page-atmosphere::after {
    background:
        radial-gradient(circle at 14% 22%, rgba(201, 158, 125, 0.085), transparent 36%),
        radial-gradient(circle at 82% 76%, rgba(142, 166, 183, 0.04), transparent 40%);
}

body[data-section-accent="olive"] .page-atmosphere::after {
    background:
        radial-gradient(circle at 22% 18%, rgba(156, 178, 120, 0.075), transparent 38%),
        radial-gradient(circle at 84% 78%, rgba(111, 143, 124, 0.045), transparent 38%);
}

body[data-section-accent="blue"] .page-atmosphere::after,
.contact-page .page-atmosphere::after {
    background:
        radial-gradient(circle at 18% 18%, rgba(111, 160, 194, 0.095), transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(157, 126, 179, 0.055), transparent 42%);
}

html[data-theme="light"] .page-atmosphere::after {
    opacity: 0.68;
}

.ambient-flow-canvas,
body[data-section-accent] .ambient-flow-canvas,
.contact-page .ambient-flow-canvas {
    opacity: 0.98;
    filter: drop-shadow(0 0 7px rgba(145, 181, 204, 0.08));
}

html[data-theme="light"] .ambient-flow-canvas {
    opacity: 0.78;
    filter: none;
}

/* Navigation utilities */

.nav-utility-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.nav-icon-link,
.theme-toggle,
.language-toggle {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1 !important;
    cursor: pointer;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.nav-icon-link:hover,
.theme-toggle:hover,
.language-toggle:hover,
.nav-icon-link:focus-visible,
.theme-toggle:focus-visible,
.language-toggle:focus-visible {
    color: var(--text) !important;
    transform: translateY(-1px) !important;
}

.nav-instagram svg {
    width: 17px;
    height: 17px;
}

.language-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-toggle svg {
    width: 15px;
    height: 15px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.language-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: -0.6rem;
    z-index: 1100;
    display: grid;
    width: 190px;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    transform-origin: top right;
    animation: language-menu-in 0.22s ease both;
}

.language-menu[hidden] {
    display: none !important;
}

@keyframes language-menu-in {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.language-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
    min-height: 42px;
    padding: 0.65rem 0.7rem;
    color: var(--muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.language-option:hover,
.language-option:focus-visible,
.language-option.is-active {
    color: var(--text);
    background: var(--card);
}

.language-option span {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.language-option small {
    font-size: 0.5rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.62;
}

.language-option[aria-disabled="true"] {
    cursor: default;
    opacity: 0.58;
}

/* Service overview alignment and micro CTAs */

.service-switcher-copy {
    gap: 1rem;
}

.service-switcher-copy .section-kicker {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    align-self: flex-start;
    transform: translateY(-0.25rem);
}

.service-panel .service-tag .tag-more-wrap {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-end !important;
    padding: 0 0 0 1.6rem !important;
    margin: 0.2rem 0 1.35rem !important;
    text-align: right !important;
}

.service-panel .service-tag .tag-more,
.service-panel .service-tag .tag-more--link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.65rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.62rem 0 !important;
    color: color-mix(in srgb, var(--tag-accent) 58%, var(--text)) !important;
    font-size: clamp(0.72rem, 0.82vw, 0.82rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0.16em !important;
    text-align: right !important;
    white-space: normal !important;
}

.service-panel .service-tag .tag-more::before,
.service-panel .service-tag .tag-more--link::before {
    content: '→';
    order: 2;
    color: var(--tag-accent);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.28s ease;
}

.service-panel .service-tag .tag-more:hover,
.service-panel .service-tag .tag-more:focus-visible,
.service-panel .service-tag .tag-more--link:hover,
.service-panel .service-tag .tag-more--link:focus-visible {
    color: var(--text) !important;
}

.service-panel .service-tag .tag-more:hover::before,
.service-panel .service-tag .tag-more:focus-visible::before,
.service-panel .service-tag .tag-more--link:hover::before,
.service-panel .service-tag .tag-more--link:focus-visible::before {
    transform: translateX(4px);
}

/* Proof icons */

.proof-item {
    position: relative;
}

.proof-icon {
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    margin-bottom: 2rem;
    color: color-mix(in srgb, var(--item-accent) 80%, var(--text));
    border: 1px solid color-mix(in srgb, var(--item-accent) 30%, var(--line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--item-accent) 7%, transparent);
    transition: transform 0.45s var(--ease-premium), background 0.35s ease;
}

.proof-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.proof-item:hover .proof-icon {
    transform: translateY(-3px) rotate(-3deg);
    background: color-mix(in srgb, var(--item-accent) 14%, transparent);
}

/* Detail header: strong text actions without pills */

.portfolio-header .detail-modal-actions {
    align-items: center !important;
    gap: clamp(0.65rem, 1.5vw, 1.35rem) !important;
}

.portfolio-header .detail-modal-back,
.portfolio-header .detail-modal-cta {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    align-items: center !important;
    padding: 0 0.15rem !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.16em !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.portfolio-header .detail-modal-cta {
    color: rgba(255, 255, 255, 0.96) !important;
}

.portfolio-header .detail-modal-back::after,
.portfolio-header .detail-modal-cta::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 6px !important;
    left: 0 !important;
    display: block !important;
    width: auto !important;
    height: 1px !important;
    opacity: 0.38 !important;
    background: currentColor !important;
    transform: scaleX(0.45) !important;
    transform-origin: left !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.portfolio-header .detail-modal-back:hover,
.portfolio-header .detail-modal-cta:hover {
    color: #fff !important;
    background: transparent !important;
    transform: none !important;
}

.portfolio-header .detail-modal-back:hover::after,
.portfolio-header .detail-modal-cta:hover::after {
    opacity: 0.9 !important;
    transform: scaleX(1) !important;
}

.portfolio-header .language-toggle,
.portfolio-header .detail-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .portfolio-header .detail-modal-back,
html[data-theme="light"] .portfolio-header .detail-modal-cta,
html[data-theme="light"] .portfolio-header .language-toggle,
html[data-theme="light"] .portfolio-header .detail-theme-toggle {
    color: rgba(0, 0, 0, 0.72) !important;
    border: 0 !important;
    background: transparent !important;
}

/* Detail page composition */

.portfolio-detail-page .detail-hero-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: center;
    min-height: min(860px, 92vh);
    padding: clamp(7.5rem, 11vw, 10rem) 0 clamp(3rem, 6vw, 6rem);
}

.portfolio-detail-page .detail-hero-layout .portfolio-ref-hero-titles {
    max-width: 760px;
    padding: 0;
}

.portfolio-detail-page .detail-hero-layout .detail-hero-visual {
    grid-column: auto !important;
    width: min(100%, 500px);
    justify-self: start;
    border-radius: clamp(14px, 1.5vw, 22px);
    box-shadow: 0 30px 90px -48px rgba(0, 0, 0, 0.85);
}

.portfolio-detail-page .detail-hero-layout .detail-hero-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: inherit;
}

.portfolio-detail-page .detail-hero-kicker {
    max-width: 54ch;
    line-height: 1.6;
}

.portfolio-detail-page .detail-hero-actions {
    margin-top: 2.2rem;
}

.portfolio-detail-page .detail-primary-action {
    position: relative;
    min-height: 44px;
    padding: 0.55rem 1.8rem 0.55rem 0;
    color: var(--portfolio-text);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.portfolio-detail-page .detail-primary-action::after {
    content: '→';
    position: absolute;
    right: 0;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.portfolio-detail-page .detail-primary-action::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    opacity: 0.55;
    background: linear-gradient(90deg, var(--portfolio-accent), transparent);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: left;
}

.portfolio-detail-page .detail-primary-action:hover {
    color: var(--portfolio-text);
    transform: none;
}

.portfolio-detail-page .detail-primary-action:hover::after {
    transform: translateX(4px);
}

.portfolio-detail-page .detail-primary-action:hover::before {
    opacity: 1;
    transform: scaleX(1.08);
}

.portfolio-detail-page .portfolio-editorial-gallery {
    gap: clamp(2.5rem, 5vw, 6rem);
    margin-top: clamp(1rem, 3vw, 3rem);
}

.portfolio-detail-page .detail-outcome-grid article {
    position: relative;
    overflow: hidden;
    transition: transform 0.45s var(--ease-premium), border-color 0.35s ease, background 0.35s ease;
}

.portfolio-detail-page .detail-outcome-grid article::after {
    content: '';
    position: absolute;
    inset: auto -20% -70% 15%;
    height: 90%;
    opacity: 0.24;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--portfolio-accent) 28%, transparent), transparent 68%);
    transition: transform 0.6s var(--ease-premium), opacity 0.4s ease;
}

.portfolio-detail-page .detail-outcome-grid article:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--portfolio-accent) 38%, var(--portfolio-border));
    background: rgba(255, 255, 255, 0.026);
}

.portfolio-detail-page .detail-outcome-grid article:hover::after {
    opacity: 0.48;
    transform: translateY(-12%) scale(1.08);
}

.portfolio-detail-page .detail-split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 7vw, 8rem);
    align-items: center;
    margin: clamp(2.5rem, 5vw, 5rem) 0 clamp(4.5rem, 9vw, 9rem);
    scroll-margin-top: 130px;
}

.portfolio-detail-page .detail-split .portfolio-ref-nav {
    grid-column: auto;
    width: auto;
    min-width: 0;
    display: flex;
    min-height: 100%;
    align-items: center;
    padding: clamp(2rem, 4.5vw, 4rem) !important;
}

.portfolio-detail-page .detail-split-image {
    overflow: hidden;
    border-radius: clamp(14px, 1.5vw, 22px);
    box-shadow: 0 32px 85px -48px rgba(0, 0, 0, 0.9);
}

.portfolio-detail-page .detail-split-image img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 520px;
    max-height: 740px;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.7s var(--ease-premium), filter 0.45s ease;
}

.portfolio-detail-page .detail-split-image:hover img {
    transform: scale(1.025);
    filter: brightness(1.04);
}

.portfolio-detail-page .detail-price-card {
    border: 1px solid color-mix(in srgb, var(--portfolio-accent) 24%, var(--portfolio-border));
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--portfolio-accent) 14%, transparent), transparent 46%),
        rgba(255, 255, 255, 0.018);
}

@media (prefers-reduced-motion: no-preference) {
    .portfolio-detail-page .detail-outcome-grid article:nth-child(2) {
        animation: outcome-breathe 6s ease-in-out -2s infinite;
    }

    .portfolio-detail-page .detail-outcome-grid article:nth-child(3) {
        animation: outcome-breathe 6.8s ease-in-out -4s infinite;
    }
}

@keyframes outcome-breathe {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@media (max-width: 900px) {
    .nav-icon-link,
    .theme-toggle,
    .language-toggle {
        transform: none !important;
        vertical-align: middle !important;
    }

    .nav-utility-item {
        height: 24px;
        align-self: center;
    }

    .nav-instagram svg {
        width: 16px;
        height: 16px;
    }

    .language-menu {
        position: fixed;
        top: 4.1rem;
        right: 0.9rem;
    }

    .portfolio-detail-page .detail-hero-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        min-height: 0;
        padding: 6.6rem 0 2.5rem;
    }

    .portfolio-detail-page .detail-hero-layout .detail-hero-visual {
        width: min(100%, 520px);
        justify-self: center;
    }

    .portfolio-detail-page .detail-hero-layout .portfolio-ref-hero-titles {
        padding: 0 !important;
    }

    .portfolio-detail-page .detail-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-block: 3rem 5rem;
    }

    .portfolio-detail-page .detail-split-image img {
        min-height: 0;
        max-height: none;
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 640px) {
    .ambient-flow-canvas,
    body[data-section-accent] .ambient-flow-canvas,
    .contact-page .ambient-flow-canvas {
        opacity: 0.9;
    }

    .header .nav ul {
        gap: clamp(0.5rem, 2.2vw, 0.75rem) !important;
        column-gap: clamp(0.5rem, 2.2vw, 0.75rem) !important;
    }

    .nav a:not(.nav-icon-link) {
        font-size: 0.6rem !important;
        letter-spacing: 0.13em !important;
    }

    .nav-icon-link,
    .theme-toggle,
    .language-toggle {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }

    .service-switcher {
        gap: 0.55rem;
    }

    .service-switcher-card {
        min-height: 122px;
        padding: 0.9rem 1.05rem;
        grid-template-rows: auto 1fr;
        border-radius: 14px;
    }

    .service-switcher-copy {
        align-self: center;
        gap: 0.42rem;
        padding: 0 3rem 0 0;
        transform: translateY(0.12rem);
    }

    .service-switcher-copy .section-kicker {
        transform: none;
        font-size: 0.52rem;
        letter-spacing: 0.2em;
    }

    .service-switcher-title {
        font-size: clamp(2rem, 11vw, 2.8rem);
        line-height: 0.92;
    }

    .service-switcher-number {
        font-size: 0.52rem;
    }

    .service-switcher-action {
        right: 0.9rem;
        bottom: 0.85rem;
    }

    .service-switcher-icon {
        width: 1.95rem;
        height: 1.95rem;
    }

    .service-switcher > .service-panel {
        grid-column: 1 / -1;
        margin: 0.1rem 0 0.7rem !important;
        scroll-margin-top: 4.7rem;
    }

    .service-panel .service-tag .tag-more-wrap {
        padding-left: 1.2rem !important;
    }

    .service-panel .service-tag .tag-more,
    .service-panel .service-tag .tag-more--link {
        justify-content: flex-end !important;
        margin-left: auto !important;
        font-size: 0.7rem !important;
        text-align: right !important;
    }

    .proof-icon {
        width: 2.65rem;
        height: 2.65rem;
        margin-bottom: 1.5rem;
    }

    .portfolio-header .detail-modal-actions {
        gap: 0.45rem !important;
    }

    .portfolio-header .detail-modal-back,
    .portfolio-header .detail-modal-cta {
        padding-inline: 0 !important;
        font-size: 0.58rem !important;
    }

    .portfolio-header .language-toggle,
    .portfolio-header .detail-theme-toggle {
        width: 36px !important;
        height: 44px !important;
        min-width: 36px !important;
        min-height: 44px !important;
    }

    .portfolio-detail-page .detail-hero-layout {
        padding-top: 5.8rem;
    }

    .portfolio-detail-page .detail-hero-layout .detail-hero-visual {
        width: min(100%, 330px);
    }

    .portfolio-detail-page .portfolio-ref-hero-heading {
        margin-bottom: 1.3rem;
    }

    .portfolio-detail-page .portfolio-elegant-subheading {
        margin-top: 1.2rem;
    }

    .portfolio-detail-page .detail-outcome-grid {
        gap: 0.75rem;
    }

    .portfolio-detail-page .detail-split .portfolio-ref-nav {
        padding: 1.5rem !important;
    }
}

/* =========================================================
   V34 — centered atmosphere, tighter navigation and stable services
   ========================================================= */

body:not(.portfolio-detail-page):not(.contact-page):not([data-section-accent]) .page-atmosphere::after {
    background:
        radial-gradient(circle at 50% 36%, rgba(91, 146, 185, 0.105), transparent 42%),
        radial-gradient(circle at 58% 74%, rgba(70, 119, 158, 0.05), transparent 46%),
        linear-gradient(145deg, rgba(86, 137, 174, 0.018), transparent 50%, rgba(54, 95, 132, 0.018));
}

.contact-page .page-atmosphere::after {
    background:
        radial-gradient(circle at 50% 40%, rgba(93, 151, 193, 0.115), transparent 42%),
        radial-gradient(circle at 60% 76%, rgba(112, 127, 174, 0.052), transparent 46%);
}

.hero-desc--identity > span {
    display: block;
}

.hero-desc-line-2 {
    margin-top: 0.28rem;
}

.nav > ul {
    align-items: center !important;
}

.nav-utilities {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;
    min-height: 28px;
    margin-left: -0.2rem;
}

.nav-utilities .nav-icon-link,
.nav-utilities .theme-toggle,
.nav-utilities .language-toggle {
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.nav-utilities .nav-instagram svg {
    width: 17px;
    height: 17px;
}

.portfolio-detail-page .portfolio-header-inner,
.portfolio-detail-page .detail-header-inner {
    width: min(100%, 1280px) !important;
    justify-content: flex-start !important;
    gap: clamp(0.8rem, 1.8vw, 1.5rem) !important;
}

.detail-header-brand,
.portfolio-detail-page .portfolio-logo {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    min-height: 36px;
    margin: 0 !important;
    color: var(--portfolio-text) !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.2em !important;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.portfolio-header .detail-modal-actions,
.portfolio-detail-page .portfolio-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.48rem !important;
    width: auto !important;
    margin: 0 !important;
}

.portfolio-header .detail-modal-back,
.portfolio-header .detail-modal-cta,
.portfolio-detail-page .portfolio-nav a {
    min-height: 36px !important;
    height: 36px !important;
    padding-inline: 0.25rem !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
}

.portfolio-header .language-toggle,
.portfolio-header .detail-theme-toggle,
.portfolio-detail-page .portfolio-nav .language-toggle,
.portfolio-detail-page .portfolio-nav .detail-theme-toggle {
    width: 28px !important;
    height: 36px !important;
    min-width: 28px !important;
    min-height: 36px !important;
}

.side-nav,
.side-nav.is-visible {
    right: clamp(10px, 1.3vw, 20px) !important;
    gap: 0.58rem !important;
    padding: 0.72rem 0.28rem !important;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}

.side-nav::before {
    display: none !important;
}

.side-nav a {
    padding: 0.38rem 0.48rem !important;
    font-size: 0.61rem !important;
    letter-spacing: 0.22em !important;
    opacity: 0.58;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

.side-nav a:hover,
.side-nav a:focus-visible,
.side-nav a.is-active {
    opacity: 1;
}

.side-nav a::before {
    right: -0.31rem !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    opacity: 0 !important;
}

.side-nav a:hover::before,
.side-nav a:focus-visible::before,
.side-nav a.is-active::before {
    height: 3px !important;
    opacity: 0.92 !important;
}

.brand-personal-note {
    display: grid;
    gap: 0.72rem;
    margin-top: 1rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--tag-accent) 24%, var(--line));
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tag-accent) 12%, transparent), transparent 52%),
        rgba(255, 255, 255, 0.015);
}

.brand-personal-note strong {
    color: var(--text);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-personal-note p {
    max-width: 62ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.brand-personal-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.brand-personal-points span {
    padding: 0.42rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--tag-accent) 22%, var(--line));
    border-radius: 999px;
    color: color-mix(in srgb, var(--tag-accent) 65%, var(--text));
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-landing .detail-split .portfolio-ref-nav-title p {
    white-space: normal;
}

@media (max-width: 900px) {
    .portfolio-detail-page .portfolio-header-inner,
    .portfolio-detail-page .detail-header-inner {
        justify-content: flex-start !important;
        gap: 0.48rem !important;
        padding-inline: 0.8rem !important;
    }

    .detail-header-brand,
    .portfolio-detail-page .portfolio-logo {
        display: inline-flex !important;
        min-height: 32px;
        font-size: 0.56rem !important;
        letter-spacing: 0.14em !important;
    }

    .portfolio-header .detail-modal-actions,
    .portfolio-detail-page .portfolio-nav {
        gap: 0.25rem !important;
    }

    .portfolio-header .detail-modal-back,
    .portfolio-header .detail-modal-cta,
    .portfolio-detail-page .portfolio-nav a {
        min-height: 34px !important;
        height: 34px !important;
        padding-inline: 0.18rem !important;
        font-size: 0.55rem !important;
        letter-spacing: 0.11em !important;
    }

    .portfolio-header .language-toggle,
    .portfolio-header .detail-theme-toggle,
    .portfolio-detail-page .portfolio-nav .language-toggle,
    .portfolio-detail-page .portfolio-nav .detail-theme-toggle {
        width: 25px !important;
        height: 34px !important;
        min-width: 25px !important;
        min-height: 34px !important;
    }
}

@media (max-width: 640px) {
    .nav-utilities {
        gap: 0.1rem !important;
        margin-left: -0.08rem;
    }

    .nav-utilities .nav-icon-link,
    .nav-utilities .theme-toggle,
    .nav-utilities .language-toggle {
        flex-basis: 21px;
        width: 21px !important;
        height: 22px !important;
        min-width: 21px !important;
        min-height: 22px !important;
    }

    .service-switcher-copy {
        gap: 0.5rem;
        transform: translateY(-0.28rem);
    }

    .service-switcher-copy .section-kicker {
        transform: translateY(-0.08rem);
    }

    .service-panels {
        margin-top: 0.62rem;
    }

    .service-panels .service-panel {
        margin: 0 0 0.72rem !important;
        scroll-margin-top: 5.2rem;
    }

    .service-switcher > .service-panel {
        margin: 0 !important;
    }

    .brand-personal-note {
        padding: 0.9rem;
    }

    .brand-personal-points {
        gap: 0.32rem;
    }

    .brand-personal-points span {
        font-size: 0.52rem;
    }
}

/* Service landing pages: keep longer editorial headlines beside the lead image. */
.portfolio-detail-page .service-landing .detail-hero-layout {
    align-items: start;
    min-height: 0;
}

.portfolio-detail-page .service-landing .detail-hero-visual {
    margin-top: 0.35rem;
}

.portfolio-detail-page .service-landing .detail-split {
    align-items: start;
}

.portfolio-detail-page .service-landing .portfolio-ref-hero-heading {
    max-width: 11ch;
    font-size: clamp(3.2rem, 5.7vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

@media (max-width: 900px) {
    .portfolio-detail-page .service-landing .detail-hero-layout {
        gap: 2.2rem;
    }

    .portfolio-detail-page .service-landing .detail-hero-visual {
        margin-top: 0;
    }

    .portfolio-detail-page .service-landing .portfolio-ref-hero-heading {
        max-width: 12ch;
        font-size: clamp(2.8rem, 10vw, 5rem);
    }
}

@media (max-width: 640px) {
    .portfolio-detail-page .service-landing .portfolio-ref-hero-heading {
        max-width: none;
        font-size: clamp(2.45rem, 12vw, 3.5rem);
        line-height: 0.96;
    }
}

/* =========================================================
   V35 — optical navigation alignment and quieter service detail
   ========================================================= */

@media (min-width: 901px) {
    .nav-utilities {
        transform: translateY(-1px);
    }
}

.side-nav a::after {
    left: auto !important;
    right: calc(100% + 0.42rem) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

.brand-personal-note {
    position: relative;
    gap: 0.55rem;
    width: calc(100% - 1.25rem);
    margin: 0.9rem 0.25rem 0.2rem 1rem;
    padding: 1rem 0 0.1rem;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--tag-accent) 22%, var(--line)) !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
}

.brand-personal-note::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 4.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--tag-accent), transparent);
}

.brand-personal-note strong {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
}

.brand-personal-note p {
    font-size: 0.86rem;
    line-height: 1.58;
}

.brand-personal-points {
    gap: 0.38rem;
    margin-top: 0.12rem;
}

@media (max-width: 640px) {
    .section--services .service-switcher .service-switcher-card:hover,
    .section--services .service-switcher .service-switcher-card:focus-visible,
    .section--services .service-switcher .service-switcher-card.is-active {
        transform: none !important;
    }

    .brand-personal-note {
        gap: 0.42rem;
        width: calc(100% - 0.9rem);
        margin: 0.7rem 0.15rem 0.05rem 0.75rem;
        padding: 0.78rem 0 0.05rem;
    }

    .brand-personal-note strong {
        font-size: 0.66rem;
        line-height: 1.4;
    }

    .brand-personal-note p {
        font-size: 0.77rem;
        line-height: 1.5;
    }

    .brand-personal-points {
        gap: 0.3rem;
    }

    .brand-personal-points span {
        padding: 0.34rem 0.46rem;
        font-size: 0.49rem;
    }
}