:root {
    --bg: #f1f0ea;
    --surface: #f7f6f1;
    --text: #171816;
    --muted: #70716c;
    --line: rgba(23,24,22,0.18);

    --project-1: #dcdcd4;
    --project-2: #d8d4cc;
    --project-3: #d7d9d3;

    --header-bg-1: rgba(241,240,234,.99);
    --header-bg-2: rgba(241,240,234,.94);
    --header-bg-3: rgba(241,240,234,0);

    --privacy-bg: rgba(247,246,241,.98);

    --page-pad: clamp(18px,4vw,58px);
    --section-space: clamp(80px,12vw,180px);

    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #242522;
    --surface: #2d2e2a;
    --text: #f2f1eb;
    --muted: #aaa9a2;
    --line: rgba(242,241,235,.18);

    --project-1: #343530;
    --project-2: #393833;
    --project-3: #30332f;

    --header-bg-1: rgba(36,37,34,.99);
    --header-bg-2: rgba(36,37,34,.94);
    --header-bg-3: rgba(36,37,34,0);

    --privacy-bg: rgba(45,46,42,.98);

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    overflow-x: hidden;
}

body,
.site-header,
.privacy-banner,
.privacy-modal,
.project-image,
.info-group,
.section-heading,
.project-info,
.site-footer {
    transition:
        background-color 280ms ease,
        color 280ms ease,
        border-color 280ms ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    padding:
        max(14px, env(safe-area-inset-top))
        var(--page-pad)
        12px;

    background:
        linear-gradient(
            to bottom,
            var(--header-bg-1),
            var(--header-bg-2),
            var(--header-bg-3)
        );
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: clamp(190px, 15vw, 260px);
    height: 64px;

    flex: 0 0 auto;
    overflow: hidden;
}

.site-logo {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain;
    object-position: left center;
}

.site-logo-light {
    display: block !important;
}

.site-logo-dark {
    display: none !important;
}

.brand-area {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.theme-toggle {
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.theme-toggle-track {
    position: relative;
    display: block;
    width: 54px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);

    transition:
        background-color 220ms ease,
        border-color 220ms ease;
}

.theme-toggle-knob {
    position: absolute;
    z-index: 2;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);

    transition:
        transform 300ms cubic-bezier(.22,.61,.36,1),
        background-color 220ms ease;
}

.theme-toggle-icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;

    transition:
        opacity 220ms ease,
        color 220ms ease;
}

.theme-toggle-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-sun {
    left: 7px;
    color: var(--bg);
    opacity: 1;
}

.theme-toggle-moon {
    right: 7px;
    color: var(--muted);
    opacity: .65;
}

html[data-theme="dark"] .theme-toggle-knob {
    transform: translateX(24px);
}

html[data-theme="dark"] .theme-toggle-sun {
    color: var(--muted);
    opacity: .55;
}

html[data-theme="dark"] .theme-toggle-moon {
    color: var(--bg);
    opacity: 1;
}

html[data-theme="dark"] .site-logo-light {
    display: none !important;
}

html[data-theme="dark"] .site-logo-dark {
    display: block !important;
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.language-switcher {
    display: flex;
    gap: 3px;
}

.language-button {
    min-width: 38px;
    min-height: 38px;

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

    gap: 4px;

    border: 1px solid transparent;
    border-radius: 999px;

    background: transparent;
    cursor: pointer;
}

.language-button.active {
    border-color: var(--line);
}

.language-flag {
    font-size: 17px;
}

.language-code {
    display: none;
    font-size: 9px;
}


/* =========================================================
   NAVIGATION + SLIDING UNDERLINE
   ========================================================= */

.header-nav {
    position: relative;

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

    gap: 10px;

    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid rgba(23,24,22,.1);
}

.nav-link {
    position: relative;

    min-height: 36px;

    display: flex;
    align-items: center;

    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--muted);

    transition: color 220ms ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text);
}

.nav-indicator {
    position: absolute;

    left: 0;
    bottom: 3px;

    width: 0;
    height: 1px;

    background: var(--text);

    pointer-events: none;

    transform: translateX(0);

    transition:
        transform 420ms cubic-bezier(.22,.61,.36,1),
        width 420ms cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    padding: 0 var(--page-pad);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 100svh;

    padding-top: 150px;
    padding-bottom: 32px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    gap: 44px;
}

.eyebrow {
    margin: 0 0 22px;

    font-size: 9px;

    color: var(--muted);

    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-title {
    margin: 0;

    font-size: clamp(58px,19vw,108px);

    font-weight: 400;
    line-height: .94;
    letter-spacing: -.01em;
}

.hero-intro {
    max-width: 440px;

    margin: clamp(28px,8vw,52px) 0 0;

    font-size: clamp(17px,4.7vw,22px);

    line-height: 1.32;
    letter-spacing: -.01em;
}


/* =========================================================
   IMAGE PLACEHOLDERS
   ========================================================= */

.project-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    display: flex;
    align-items: flex-end;

    padding: clamp(16px,3vw,26px);

    background: var(--project-1);
}

.project-image::before {
    content: "";

    position: absolute;

    width: 78%;
    height: 58%;

    right: -10%;
    top: 10%;

    background: rgba(23,24,22,.045);

    transform: skewX(-14deg);
}

.project-image-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
}

.image-label {
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.image-help {
    color: rgba(23,24,22,.5);
    font-size: 10px;
}

.project-image.has-image {
    background-size: cover;
    background-position: center;
}

.project-image.has-image::before {
    display: none;
}

.project-image.has-image .project-image-inner {
    display: none;
}

.project-two {
    background: var(--project-2);
}

.project-three {
    background: var(--project-3);
}

figcaption {
    margin-top: 9px;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
    padding-top: var(--section-space);
    scroll-margin-top: 110px;
}

.section-heading {
    display: grid;
    grid-template-columns: 36px 1fr;

    padding-top: 12px;
    margin-bottom: clamp(35px,8vw,70px);

    border-top: 1px solid var(--line);
}

.section-number {
    font-size: 9px;
    color: var(--muted);
}

.section-title {
    margin: 0;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.project {
    margin-bottom: clamp(80px,18vw,180px);
}

.project-info {
    display: grid;
    grid-template-columns: 1fr;

    gap: 20px;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid var(--line);
}

.project-index {
    display: block;

    margin-bottom: 4px;

    font-size: 8px;
    color: var(--muted);
}

.project-title {
    margin: 0;

    font-size: clamp(25px,8vw,42px);

    font-weight: 400;
    line-height: 1.05;

    letter-spacing: -.02em;
}

.project-meta {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 4px 20px;
}

.project-meta p {
    margin: 0;

    color: var(--muted);

    font-size: 10px;
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 60px;
}

.about-lead {
    margin: 0;

    font-size: clamp(36px,10vw,76px);

    font-weight: 400;
    line-height: 1.05;

    letter-spacing: -.025em;
}

.about-details {
    display: grid;
    gap: 28px;
}

.info-group {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.info-title {
    margin: 0 0 8px;

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.info-text {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.65;
}


/* =========================================================
   TOOLS
   ========================================================= */

.tools-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.tool-item {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--muted);
}

.tool-logo {
    width: 22px;
    height: 22px;

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

    flex: 0 0 22px;

    color: var(--text);
}

.tool-logo svg {
    width: 20px;
    height: 20px;
}

.tool-name {
    font-size: 12px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {
    padding-bottom: clamp(100px,15vw,180px);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 55px;
}

.contact-lead {
    margin: 0;

    font-size: clamp(40px,11vw,95px);

    font-weight: 400;
    line-height: 1;

    letter-spacing: -.025em;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 12px 18px;
}

.contact-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 34px;

    color: var(--text);

    font-size: 11px;

    cursor: pointer;

    border: 0;
    background: transparent;

    padding: 0;
}

.contact-link:hover .contact-label {
    border-bottom-color: currentColor;
}

.contact-icon {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    color: var(--muted);
}

.contact-label {
    border-bottom: 1px solid transparent;

    transition: border-color 150ms ease;
}

.phone-reveal {
    width: 100%;

    margin-top: 4px;
}

.phone-number {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    font-size: 11px;

    border-bottom: 1px solid currentColor;
}

.contact-location {
    margin: 20px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin: 0 var(--page-pad);

    padding:
        17px 0
        max(28px,env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;

    gap: 15px;

    border-top: 1px solid var(--line);

    color: var(--muted);

    font-size: 8px;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-footer p {
    margin: 0;
}

.footer-right {
    display: flex;
    flex-wrap: wrap;

    gap: 15px;
}

.footer-button {
    border: 0;
    background: transparent;

    padding: 0;

    color: inherit;

    cursor: pointer;

    font-size: inherit;

    letter-spacing: inherit;
    text-transform: inherit;
}


/* =========================================================
   PRIVACY
   ========================================================= */

.privacy-banner {
    position: fixed;

    z-index: 500;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        24px
        var(--page-pad)
        max(22px,env(safe-area-inset-bottom));

    background: var(--privacy-bg);

    border-top: 1px solid var(--line);

    box-shadow: 0 -12px 50px rgba(0,0,0,.08);
}

.privacy-banner-layout {
    display: grid;
    gap: 22px;
}

.privacy-banner-title {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.privacy-banner-copy {
    margin: 0;

    max-width: 660px;

    color: var(--muted);

    font-size: 12px;
}

.privacy-actions {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
}

.privacy-button {
    min-height: 48px;

    padding: 12px 16px;

    border: 1px solid var(--text);

    background: transparent;

    cursor: pointer;
}

.privacy-button.primary {
    background: var(--text);
    color: var(--bg);
}

.privacy-manage {
    border: 0;

    color: var(--muted);

    text-decoration: underline;
}

.privacy-backdrop {
    position: fixed;

    z-index: 600;

    inset: 0;

    background: rgba(15,15,14,.42);
}

.privacy-modal {
    position: fixed;

    z-index: 700;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    max-height: calc(100svh - 20px);

    overflow-y: auto;

    padding:
        30px
        var(--page-pad)
        max(26px,env(safe-area-inset-bottom));

    background: var(--surface);

    border-top: 1px solid var(--line);
}

.privacy-modal-inner {
    max-width: 700px;
    margin: auto;
}

.privacy-close {
    position: absolute;

    right: var(--page-pad);
    top: 19px;

    border: 0;
    background: transparent;

    font-size: 28px;

    cursor: pointer;
}

.privacy-modal-title {
    margin: 0 0 18px;

    max-width: 85%;

    font-size: clamp(30px,9vw,48px);

    font-weight: 400;
}

.privacy-modal-intro {
    color: var(--muted);
}

.privacy-option {
    display: grid;
    grid-template-columns: 1fr auto;

    gap: 22px;

    padding: 20px 0;

    border-top: 1px solid var(--line);
}

.privacy-option-title {
    margin: 0 0 6px;

    font-size: 10px;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.privacy-option-description {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.privacy-always {
    color: var(--muted);

    font-size: 9px;

    text-transform: uppercase;
}

.toggle {
    position: relative;

    width: 46px;
    height: 26px;
}

.toggle input {
    position: absolute;
    opacity: 0;
}

.toggle-track {
    position: absolute;

    inset: 0;

    border: 1px solid var(--text);
    border-radius: 999px;
}

.toggle-track::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: var(--text);

    transition: transform .18s ease;
}

.toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.privacy-modal-actions {
    display: grid;
    gap: 9px;

    padding-top: 22px;

    border-top: 1px solid var(--line);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 600px) {

    .language-code {
        display: inline;
    }

    .hero-image,
    .project-image {
        aspect-ratio: 16 / 10;
    }

    .project-info {
        grid-template-columns: 1.25fr .75fr;
    }

    .project-meta {
        grid-template-columns: 1fr;
    }

    .about-details {
        grid-template-columns: repeat(3,1fr);
    }

    .privacy-actions {
        grid-template-columns: 1fr 1fr;
    }

    .privacy-manage {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .site-header {
        display: grid;

        grid-template-columns: 1fr auto;

        padding-top: 21px;
    }

    .header-top {
        display: contents;
    }

    .brand-area {
        grid-column: 1;
    }

    .brand {
        width: clamp(190px, 15vw, 260px);
        height: 64px;
    }

    .language-switcher {
        grid-column: 2;
    }

    .header-nav {
        position: absolute;

        left: 50%;
        top: 18px;

        transform: translateX(-50%);

        width: auto;

        gap: 30px;

        margin: 0;
        padding: 0;

        border: 0;
    }

    .hero {
        display: grid;

        grid-template-columns: .9fr 1.35fr;

        align-items: end;

        gap: clamp(40px,6vw,100px);

        padding-top: 130px;
    }

    .hero-title {
        font-size: clamp(88px,8.6vw,158px);
        line-height: .95;
    }

    .hero-image {
        min-height: min(70vh,780px);

        aspect-ratio: 4 / 3;
    }

    .section-heading {
        grid-template-columns: 62px 1fr;
    }

    .project-grid {
        grid-template-columns: repeat(2,1fr);

        gap: clamp(26px,4vw,72px);
    }

    .project-grid .project-image {
        aspect-ratio: 4 / 5;
    }

    .about-layout {
        grid-template-columns: 1.25fr .75fr;

        gap: clamp(80px,10vw,190px);

        align-items: end;
    }

    .about-details {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        grid-template-columns: 1.25fr .75fr;

        gap: clamp(80px,10vw,190px);
    }

    .privacy-banner {
        left: 18px;
        right: 18px;
        bottom: 18px;

        border: 1px solid var(--line);
    }

    .privacy-banner-layout {
        grid-template-columns: 1fr auto;

        align-items: center;
    }

    .privacy-actions {
        display: flex;
    }

    .privacy-button {
        width: auto;
        min-height: 43px;
    }

    .privacy-manage {
        order: -1;
    }

    .privacy-modal {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;

        width: min(680px,calc(100vw - 40px));

        transform: translate(-50%,-50%);

        padding: 44px;

        border: 1px solid var(--line);
    }

}


/* =========================================================
   MOBILE LOGO + THEME TOGGLE
   ========================================================= */

@media (max-width: 599px) {

    .brand-area {
        gap: 9px;
    }

    .brand {
        width: 175px;
        height: 48px;
        flex: 0 0 175px;
        overflow: hidden;
    }

    .site-logo {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
        object-position: left center;
    }

    .theme-toggle-track {
        width: 48px;
        height: 28px;
    }

    .theme-toggle-knob {
        width: 20px;
        height: 20px;
    }

    html[data-theme="dark"] .theme-toggle-knob {
        transform: translateX(20px);
    }

    .theme-toggle-icon,
    .theme-toggle-icon svg {
        width: 12px;
        height: 12px;
    }

    .theme-toggle-sun {
        left: 7px;
    }

    .theme-toggle-moon {
        right: 7px;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .brand {
        width: 150px;
        height: 44px;
        flex-basis: 150px;
    }

    .hero-title {
        font-size: 54px;
    }

    .contact-links {
        gap: 8px 14px;
    }

    .contact-link {
        font-size: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    .nav-indicator {
        transition: none;
    }

}


/* =========================================================
   COMPACT HEADER + HAMBURGER SETTINGS MENU
   ========================================================= */

.site-header {
    padding:
        max(10px, env(safe-area-inset-top))
        var(--page-pad)
        8px;
}

.header-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    gap: 16px;
}

.brand {
    width: clamp(165px, 13vw, 225px);
    height: 48px;
    flex: 0 0 auto;
}

/* Main navigation stays fixed in three equal positions on every language. */
.header-nav {
    position: absolute;
    left: 50%;
    top: max(10px, env(safe-area-inset-top));
    transform: translateX(-50%);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;

    width: clamp(330px, 34vw, 500px);
    height: 48px;

    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.nav-link {
    min-width: 0;
    min-height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nav-indicator {
    bottom: 4px;
}

/* Hamburger */
.menu-toggle {
    position: relative;
    z-index: 103;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;

    transition:
        background-color 220ms ease,
        border-color 220ms ease;
}

.menu-toggle-line {
    display: block;
    width: 16px;
    height: 1px;
    background: var(--text);
    transform-origin: center;

    transition:
        transform 240ms ease,
        opacity 180ms ease;
}

.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Settings panel */
.settings-menu {
    position: absolute;
    top: calc(max(10px, env(safe-area-inset-top)) + 52px);
    right: var(--page-pad);
    z-index: 102;

    width: min(290px, calc(100vw - (2 * var(--page-pad))));

    padding: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0,0,0,.10);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 220ms cubic-bezier(.22,.61,.36,1),
        background-color 280ms ease,
        border-color 280ms ease;
}

.settings-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.settings-group + .settings-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.settings-label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.language-switcher {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.language-button {
    min-width: 0;
    min-height: 40px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0;
}

.language-button.active {
    border-color: var(--text);
}

.language-code {
    display: inline;
}

.settings-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.settings-theme-row .settings-label {
    margin: 0;
}

/* Theme slider remains the same visual component, only moved inside menu. */
.theme-toggle {
    display: block;
    flex: 0 0 auto;
}

/* The hero can start slightly higher now because the header is more compact. */
.hero {
    padding-top: 100px;
}

@media (min-width: 900px) {

    .site-header {
        display: block;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .header-top {
        display: flex;
    }

    .brand {
        width: clamp(165px, 13vw, 225px);
        height: 48px;
    }

    .hero {
        padding-top: 100px;
    }
}

@media (max-width: 760px) {

    .site-header {
        padding-bottom: 6px;
    }

    .header-top {
        min-height: 42px;
    }

    .brand {
        width: clamp(125px, 36vw, 165px);
        height: 40px;
        flex-basis: auto;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .header-nav {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 34px;
        margin-top: 1px;
    }

    .nav-link {
        min-height: 32px;
        font-size: 9px;
    }

    .nav-indicator {
        bottom: 0;
    }

    .settings-menu {
        top: calc(max(10px, env(safe-area-inset-top)) + 44px);
    }

    .hero {
        padding-top: 92px;
    }
}

@media (max-width: 380px) {

    .brand {
        width: 120px;
        height: 38px;
    }

    .settings-menu {
        width: calc(100vw - (2 * var(--page-pad)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-menu,
    .menu-toggle-line {
        transition: none;
    }
}

/* =========================================================
   ANIMATED ARCHITECT LOGO — V7
   ========================================================= */

:root {
    --logo-wood: #b98552;
    --logo-wood-dark: #8e623b;
}

html[data-theme="dark"] {
    --logo-wood: #c99764;
    --logo-wood-dark: #9f7147;
}

.animated-brand {
    color: var(--text);
    cursor: pointer;
}

.animated-logo {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.logo-house-build {
    pointer-events: none;
}

/* Original roof + upper left wall remain visible throughout the build. */
.logo-house-original {
    opacity: 1 !important;
}


/* =========================================================
   RESTING STATE
   ========================================================= */

.logo-text {
    opacity: 1;
    transform: translateX(0);
}

.logo-timber-left {
    opacity: 1;
}

/* All added elements are hidden at rest. */
.logo-house-build .mirrored-house-structure,
.logo-house-build .left-wall-extension,
.logo-house-build .right-wall-extension,
.logo-house-build .new-house-floor,
.logo-house-build .full-timber-facade,
.logo-house-build .facade-seams,
.logo-house-build .front-door,
.logo-house-build .front-window,
.logo-house-build .chimney,
.logo-house-build .chimney-smoke {
    opacity: 0;
}

.logo-house-build .new-house-floor {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.logo-house-build .left-wall-extension,
.logo-house-build .right-wall-extension,
.logo-house-build .front-door,
.logo-house-build .front-window,
.logo-house-build .chimney,
.logo-house-build .full-timber-facade {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: scaleY(.03);
}


/* =========================================================
   FORWARD BUILD
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .animated-brand:hover .logo-text,
    .animated-brand:focus-visible .logo-text {
        opacity: 0;
        transform: translateX(10px);

        transition:
            opacity 360ms ease 0ms,
            transform 420ms cubic-bezier(.22,.61,.36,1) 0ms;
    }

    .animated-brand:hover .logo-timber-left,
    .animated-brand:focus-visible .logo-timber-left {
        opacity: 0;

        transition:
            opacity 380ms ease 280ms;
    }

    /* Continue original roof with a matching right overhang. */
    .animated-brand:hover .mirrored-house-structure,
    .animated-brand:focus-visible .mirrored-house-structure {
        opacity: 1;
        transform: translateX(0) scale(1);

        transition:
            opacity 700ms ease 450ms,
            transform 1100ms cubic-bezier(.22,.61,.36,1) 450ms;
    }

    /* Original left wall grows down to floor; right post rises to match it. */
    .animated-brand:hover .left-wall-extension,
    .animated-brand:focus-visible .left-wall-extension {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 180ms ease 820ms,
            transform 720ms cubic-bezier(.22,.61,.36,1) 820ms;
    }

    .animated-brand:hover .right-wall-extension,
    .animated-brand:focus-visible .right-wall-extension {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 180ms ease 980ms,
            transform 850ms cubic-bezier(.22,.61,.36,1) 980ms;
    }

    .animated-brand:hover .new-house-floor,
    .animated-brand:focus-visible .new-house-floor {
        opacity: 1;
        stroke-dashoffset: 0;

        transition:
            opacity 180ms ease 1120ms,
            stroke-dashoffset 850ms cubic-bezier(.22,.61,.36,1) 1120ms;
    }

    /* Timber wall fills continuously from roof to floor. */
    .animated-brand:hover .full-timber-facade,
    .animated-brand:focus-visible .full-timber-facade {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 220ms ease 1350ms,
            transform 1350ms cubic-bezier(.22,.61,.36,1) 1350ms;
    }

    .animated-brand:hover .facade-seams,
    .animated-brand:focus-visible .facade-seams {
        opacity: .58;

        transition:
            opacity 760ms ease 1980ms;
    }

    .animated-brand:hover .front-door,
    .animated-brand:focus-visible .front-door {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 220ms ease 2350ms,
            transform 760ms cubic-bezier(.22,.61,.36,1) 2350ms;
    }

    .animated-brand:hover .front-window-left,
    .animated-brand:focus-visible .front-window-left {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 220ms ease 2520ms,
            transform 700ms cubic-bezier(.22,.61,.36,1) 2520ms;
    }

    .animated-brand:hover .front-window-right,
    .animated-brand:focus-visible .front-window-right {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 220ms ease 2680ms,
            transform 700ms cubic-bezier(.22,.61,.36,1) 2680ms;
    }

    .animated-brand:hover .chimney,
    .animated-brand:focus-visible .chimney {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 180ms ease 3020ms,
            transform 600ms cubic-bezier(.22,.61,.36,1) 3020ms;
    }

    .animated-brand:hover .chimney-smoke,
    .animated-brand:focus-visible .chimney-smoke {
        opacity: 1;

        transition:
            opacity 450ms ease 3400ms;
    }

    .animated-brand:hover .chimney-smoke .smoke,
    .animated-brand:focus-visible .chimney-smoke .smoke {
        animation-play-state: running;
    }
}


/* Touch uses the same forward state. */
.animated-brand.is-animated .logo-text {
    opacity: 0;
    transform: translateX(10px);

    transition:
        opacity 360ms ease 0ms,
        transform 420ms cubic-bezier(.22,.61,.36,1) 0ms;
}

.animated-brand.is-animated .logo-timber-left {
    opacity: 0;
    transition: opacity 380ms ease 280ms;
}

.animated-brand.is-animated .mirrored-house-structure {
    opacity: 1;
    transform: translateX(0) scale(1);

    transition:
        opacity 700ms ease 450ms,
        transform 1100ms cubic-bezier(.22,.61,.36,1) 450ms;
}

.animated-brand.is-animated .left-wall-extension {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 180ms ease 820ms,
        transform 720ms cubic-bezier(.22,.61,.36,1) 820ms;
}

.animated-brand.is-animated .right-wall-extension {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 180ms ease 980ms,
        transform 850ms cubic-bezier(.22,.61,.36,1) 980ms;
}

.animated-brand.is-animated .new-house-floor {
    opacity: 1;
    stroke-dashoffset: 0;

    transition:
        opacity 180ms ease 1120ms,
        stroke-dashoffset 850ms cubic-bezier(.22,.61,.36,1) 1120ms;
}

.animated-brand.is-animated .full-timber-facade {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 220ms ease 1350ms,
        transform 1350ms cubic-bezier(.22,.61,.36,1) 1350ms;
}

.animated-brand.is-animated .facade-seams {
    opacity: .58;
    transition: opacity 760ms ease 1980ms;
}

.animated-brand.is-animated .front-door {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 220ms ease 2350ms,
        transform 760ms cubic-bezier(.22,.61,.36,1) 2350ms;
}

.animated-brand.is-animated .front-window-left {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 220ms ease 2520ms,
        transform 700ms cubic-bezier(.22,.61,.36,1) 2520ms;
}

.animated-brand.is-animated .front-window-right {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 220ms ease 2680ms,
        transform 700ms cubic-bezier(.22,.61,.36,1) 2680ms;
}

.animated-brand.is-animated .chimney {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 180ms ease 3020ms,
        transform 600ms cubic-bezier(.22,.61,.36,1) 3020ms;
}

.animated-brand.is-animated .chimney-smoke {
    opacity: 1;
    transition: opacity 450ms ease 3400ms;
}

.animated-brand.is-animated .chimney-smoke .smoke {
    animation-play-state: running;
}


/* =========================================================
   SMOOTH REVERSE / RETURN
   ========================================================= */

/*
   JS adds .is-returning on mouseleave.
   The final text only begins returning after the house has fully
   deconstructed, avoiding the "sudden pop" seen in V6.
*/

.animated-brand.is-returning .chimney-smoke {
    animation: v7FadeOut 260ms ease 0ms both;
}

.animated-brand.is-returning .chimney {
    animation: v7ScaleDown 520ms cubic-bezier(.4,0,.2,1) 180ms both;
}

.animated-brand.is-returning .front-window-right {
    animation: v7ScaleDown 560ms cubic-bezier(.4,0,.2,1) 520ms both;
}

.animated-brand.is-returning .front-window-left {
    animation: v7ScaleDown 560ms cubic-bezier(.4,0,.2,1) 650ms both;
}

.animated-brand.is-returning .front-door {
    animation: v7ScaleDown 620ms cubic-bezier(.4,0,.2,1) 780ms both;
}

.animated-brand.is-returning .facade-seams {
    animation: v7FadeOut 380ms ease 1120ms both;
}

.animated-brand.is-returning .full-timber-facade {
    animation: v7ScaleDown 900ms cubic-bezier(.4,0,.2,1) 1250ms both;
}

.animated-brand.is-returning .new-house-floor {
    animation: v7StrokeRetract 700ms cubic-bezier(.4,0,.2,1) 1900ms both;
}

.animated-brand.is-returning .right-wall-extension {
    animation: v7ScaleDown 700ms cubic-bezier(.4,0,.2,1) 2050ms both;
}

.animated-brand.is-returning .left-wall-extension {
    animation: v7ScaleDown 620ms cubic-bezier(.4,0,.2,1) 2180ms both;
}

.animated-brand.is-returning .mirrored-house-structure {
    animation: v73StructureReturn 1050ms cubic-bezier(.4,0,.2,1) 2180ms both;
}

/* Original melamine motif returns only after the new facade is gone. */
.animated-brand.is-returning .logo-timber-left {
    animation: v7FadeIn 420ms ease 3100ms both;
}

/* Wordmark is absolutely last. */
.animated-brand.is-returning .logo-text {
    animation: v7TextReturn 520ms cubic-bezier(.22,.61,.36,1) 3380ms both;
}

@keyframes v7FadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes v7FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes v7ScaleDown {
    from {
        opacity: 1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(.03);
    }
}

@keyframes v7StrokeRetract {
    from {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    to {
        opacity: 0;
        stroke-dashoffset: 1;
    }
}

@keyframes v73StructureReturn {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-8px) scale(.985);
    }
}

@keyframes v7TextReturn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Smoke movement */
.chimney-smoke .smoke {
    stroke-width: 6;
    opacity: .42;
    animation: logoSmoke 2.5s ease-in-out infinite;
    animation-play-state: paused;
}

.chimney-smoke .smoke-2 {
    animation-delay: -.85s;
}

.chimney-smoke .smoke-3 {
    animation-delay: -1.6s;
}

@keyframes logoSmoke {
    0% {
        transform: translateY(5px);
        opacity: .10;
    }
    42% {
        opacity: .50;
    }
    100% {
        transform: translateY(-13px);
        opacity: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    .logo-text,
    .logo-timber-left,
    .logo-house-build *,
    .chimney-smoke .smoke {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   V7.3 — UNIFIED SMOOTH MATERIAL MOTION
   ========================================================= */

/*
   Final geometry is unchanged. These rules only harmonize how
   constructed materials fade/grow in and out, so the mirrored
   roof structure no longer feels like a separate animation.
*/

.logo-house-build .mirrored-house-structure,
.logo-house-build .left-wall-extension,
.logo-house-build .right-wall-extension,
.logo-house-build .new-house-floor,
.logo-house-build .full-timber-facade,
.logo-house-build .facade-seams,
.logo-house-build .front-door,
.logo-house-build .front-window,
.logo-house-build .chimney,
.logo-house-build .chimney-smoke {
    will-change: opacity, transform;
}

@media (hover: hover) and (pointer: fine) {

    .animated-brand:hover .left-wall-extension,
    .animated-brand:focus-visible .left-wall-extension,
    .animated-brand:hover .right-wall-extension,
    .animated-brand:focus-visible .right-wall-extension,
    .animated-brand:hover .full-timber-facade,
    .animated-brand:focus-visible .full-timber-facade,
    .animated-brand:hover .front-door,
    .animated-brand:focus-visible .front-door,
    .animated-brand:hover .front-window,
    .animated-brand:focus-visible .front-window,
    .animated-brand:hover .chimney,
    .animated-brand:focus-visible .chimney {
        transition-timing-function: cubic-bezier(.22,.61,.36,1);
    }
}

/*
   During the reverse sequence, keep the original wordmark hidden
   until all constructed materials have fully faded away.
*/
.animated-brand.is-returning .logo-text {
    animation-delay: 3500ms;
}

.animated-brand.is-returning .logo-timber-left {
    animation-delay: 3180ms;
}

/* =========================================================
   V7.4 — EXPAND / DRAW FROM ORIGINAL LOGO
   ========================================================= */

/*
   Geometry stays unchanged.
   The new house now grows outward from the original logo:
   - mirrored roof expands from the original ridge
   - wall structure spreads outward from the original left side
   - timber facade opens horizontally, then rises
   - door/windows/chimney rise from their bases
   - reverse animation collapses back into the original logo
*/

.logo-house-build .mirrored-house-structure {
    transform-box: fill-box;
    transform-origin: left center;
    transform: translateX(-14px) scaleX(.05) scaleY(.96);
    opacity: 0;
}

.logo-house-build .left-wall-extension {
    transform-box: fill-box;
    transform-origin: center top;
    transform: scaleY(.03);
    opacity: 0;
}

.logo-house-build .right-wall-extension {
    transform-box: fill-box;
    transform-origin: left center;
    transform: translateX(-120px) scaleX(.06);
    opacity: 0;
}

.logo-house-build .new-house-floor {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.logo-house-build .full-timber-facade {
    transform-box: fill-box;
    transform-origin: left bottom;
    transform: translateX(-40px) scaleX(.08) scaleY(.05);
    opacity: 0;
}

.logo-house-build .facade-seams {
    opacity: 0;
}

.logo-house-build .front-door,
.logo-house-build .front-window {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: translateY(18px) scaleY(.03);
    opacity: 0;
}

.logo-house-build .chimney {
    transform-box: fill-box;
    transform-origin: center bottom;
    transform: translateY(18px) scaleY(.03);
    opacity: 0;
}

.logo-house-build .chimney-smoke {
    opacity: 0;
}


/* ---------- FORWARD BUILD ---------- */

@media (hover: hover) and (pointer: fine) {

    .animated-brand:hover .mirrored-house-structure,
    .animated-brand:focus-visible .mirrored-house-structure {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);

        transition:
            opacity 260ms ease 340ms,
            transform 1050ms cubic-bezier(.22,.61,.36,1) 340ms;
    }

    .animated-brand:hover .left-wall-extension,
    .animated-brand:focus-visible .left-wall-extension {
        opacity: 1;
        transform: scaleY(1);

        transition:
            opacity 180ms ease 620ms,
            transform 620ms cubic-bezier(.22,.61,.36,1) 620ms;
    }

    .animated-brand:hover .right-wall-extension,
    .animated-brand:focus-visible .right-wall-extension {
        opacity: 1;
        transform: translateX(0) scaleX(1);

        transition:
            opacity 180ms ease 760ms,
            transform 800ms cubic-bezier(.22,.61,.36,1) 760ms;
    }

    .animated-brand:hover .new-house-floor,
    .animated-brand:focus-visible .new-house-floor {
        opacity: 1;
        stroke-dashoffset: 0;

        transition:
            opacity 180ms ease 920ms,
            stroke-dashoffset 760ms cubic-bezier(.22,.61,.36,1) 920ms;
    }

    /*
       Facade first spreads from the original wall, then rises.
       The combined X/Y scaling gives the feeling of the wall
       physically growing out of the original logo.
    */
    .animated-brand:hover .full-timber-facade,
    .animated-brand:focus-visible .full-timber-facade {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);

        transition:
            opacity 220ms ease 1080ms,
            transform 1050ms cubic-bezier(.22,.61,.36,1) 1080ms;
    }

    .animated-brand:hover .facade-seams,
    .animated-brand:focus-visible .facade-seams {
        opacity: .58;

        transition:
            opacity 520ms ease 1680ms;
    }

    .animated-brand:hover .front-door,
    .animated-brand:focus-visible .front-door {
        opacity: 1;
        transform: translateY(0) scaleY(1);

        transition:
            opacity 180ms ease 1880ms,
            transform 560ms cubic-bezier(.22,.61,.36,1) 1880ms;
    }

    .animated-brand:hover .front-window-left,
    .animated-brand:focus-visible .front-window-left {
        opacity: 1;
        transform: translateY(0) scaleY(1);

        transition:
            opacity 180ms ease 2010ms,
            transform 520ms cubic-bezier(.22,.61,.36,1) 2010ms;
    }

    .animated-brand:hover .front-window-right,
    .animated-brand:focus-visible .front-window-right {
        opacity: 1;
        transform: translateY(0) scaleY(1);

        transition:
            opacity 180ms ease 2120ms,
            transform 520ms cubic-bezier(.22,.61,.36,1) 2120ms;
    }

    .animated-brand:hover .chimney,
    .animated-brand:focus-visible .chimney {
        opacity: 1;
        transform: translateY(0) scaleY(1);

        transition:
            opacity 180ms ease 2320ms,
            transform 520ms cubic-bezier(.22,.61,.36,1) 2320ms;
    }

    .animated-brand:hover .chimney-smoke,
    .animated-brand:focus-visible .chimney-smoke {
        opacity: 1;

        transition:
            opacity 320ms ease 2620ms;
    }
}


/* ---------- TOUCH BUILD ---------- */

.animated-brand.is-animated .mirrored-house-structure {
    opacity: 1;
    transform: translateX(0) scaleX(1) scaleY(1);

    transition:
        opacity 260ms ease 340ms,
        transform 1050ms cubic-bezier(.22,.61,.36,1) 340ms;
}

.animated-brand.is-animated .left-wall-extension {
    opacity: 1;
    transform: scaleY(1);

    transition:
        opacity 180ms ease 620ms,
        transform 620ms cubic-bezier(.22,.61,.36,1) 620ms;
}

.animated-brand.is-animated .right-wall-extension {
    opacity: 1;
    transform: translateX(0) scaleX(1);

    transition:
        opacity 180ms ease 760ms,
        transform 800ms cubic-bezier(.22,.61,.36,1) 760ms;
}

.animated-brand.is-animated .new-house-floor {
    opacity: 1;
    stroke-dashoffset: 0;

    transition:
        opacity 180ms ease 920ms,
        stroke-dashoffset 760ms cubic-bezier(.22,.61,.36,1) 920ms;
}

.animated-brand.is-animated .full-timber-facade {
    opacity: 1;
    transform: translateX(0) scaleX(1) scaleY(1);

    transition:
        opacity 220ms ease 1080ms,
        transform 1050ms cubic-bezier(.22,.61,.36,1) 1080ms;
}

.animated-brand.is-animated .facade-seams {
    opacity: .58;
    transition: opacity 520ms ease 1680ms;
}

.animated-brand.is-animated .front-door {
    opacity: 1;
    transform: translateY(0) scaleY(1);

    transition:
        opacity 180ms ease 1880ms,
        transform 560ms cubic-bezier(.22,.61,.36,1) 1880ms;
}

.animated-brand.is-animated .front-window-left {
    opacity: 1;
    transform: translateY(0) scaleY(1);

    transition:
        opacity 180ms ease 2010ms,
        transform 520ms cubic-bezier(.22,.61,.36,1) 2010ms;
}

.animated-brand.is-animated .front-window-right {
    opacity: 1;
    transform: translateY(0) scaleY(1);

    transition:
        opacity 180ms ease 2120ms,
        transform 520ms cubic-bezier(.22,.61,.36,1) 2120ms;
}

.animated-brand.is-animated .chimney {
    opacity: 1;
    transform: translateY(0) scaleY(1);

    transition:
        opacity 180ms ease 2320ms,
        transform 520ms cubic-bezier(.22,.61,.36,1) 2320ms;
}

.animated-brand.is-animated .chimney-smoke {
    opacity: 1;
    transition: opacity 320ms ease 2620ms;
}


/* ---------- FASTER, SMOOTH COLLAPSE BACK ---------- */

/*
   Everything folds back toward the original left structure.
   Total reverse time is now about 2.2 s instead of ~4 s.
*/

.animated-brand.is-returning .chimney-smoke {
    animation: v74FadeOut 180ms ease 0ms both;
}

.animated-brand.is-returning .chimney {
    animation: v74RiseDown 360ms cubic-bezier(.4,0,.2,1) 100ms both;
}

.animated-brand.is-returning .front-window-right {
    animation: v74RiseDown 360ms cubic-bezier(.4,0,.2,1) 300ms both;
}

.animated-brand.is-returning .front-window-left {
    animation: v74RiseDown 360ms cubic-bezier(.4,0,.2,1) 390ms both;
}

.animated-brand.is-returning .front-door {
    animation: v74RiseDown 420ms cubic-bezier(.4,0,.2,1) 470ms both;
}

.animated-brand.is-returning .facade-seams {
    animation: v74FadeOut 260ms ease 720ms both;
}

.animated-brand.is-returning .full-timber-facade {
    animation: v74FacadeCollapse 650ms cubic-bezier(.4,0,.2,1) 820ms both;
}

.animated-brand.is-returning .new-house-floor {
    animation: v74StrokeBack 520ms cubic-bezier(.4,0,.2,1) 1180ms both;
}

.animated-brand.is-returning .right-wall-extension {
    animation: v74RightWallBack 520ms cubic-bezier(.4,0,.2,1) 1280ms both;
}

.animated-brand.is-returning .left-wall-extension {
    animation: v74LeftWallBack 440ms cubic-bezier(.4,0,.2,1) 1380ms both;
}

.animated-brand.is-returning .mirrored-house-structure {
    animation: v74StructureBack 680ms cubic-bezier(.4,0,.2,1) 1450ms both;
}

/* Original four-strip motif returns just before the text. */
.animated-brand.is-returning .logo-timber-left {
    animation: v74FadeIn 300ms ease 1880ms both;
}

/* Wordmark returns last, but much sooner than before. */
.animated-brand.is-returning .logo-text {
    animation: v74TextReturn 380ms cubic-bezier(.22,.61,.36,1) 2020ms both;
}


@keyframes v74FadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes v74FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes v74RiseDown {
    from {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
    to {
        opacity: 0;
        transform: translateY(18px) scaleY(.03);
    }
}

@keyframes v74FacadeCollapse {
    from {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 0;
        transform: translateX(-40px) scaleX(.08) scaleY(.05);
    }
}

@keyframes v74StrokeBack {
    from {
        opacity: 1;
        stroke-dashoffset: 0;
    }
    to {
        opacity: 0;
        stroke-dashoffset: 1;
    }
}

@keyframes v74RightWallBack {
    from {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
    to {
        opacity: 0;
        transform: translateX(-120px) scaleX(.06);
    }
}

@keyframes v74LeftWallBack {
    from {
        opacity: 1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(.03);
    }
}

@keyframes v74StructureBack {
    from {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    to {
        opacity: 0;
        transform: translateX(-14px) scaleX(.05) scaleY(.96);
    }
}

@keyframes v74TextReturn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   V7.5 — WORDMARK RETRACTS INTO THE ORIGINAL WALL
   ========================================================= */

/*
   The wordmark now behaves like another architectural element:
   it withdraws toward the original left wall and fades as it
   reaches it. The subtitle is deliberately the last line to
   disappear and the last line to return.
*/

.logo-text {
    opacity: 1 !important;
    transform: none !important;
}

.logo-word {
    transform-box: fill-box;
    transform-origin: left center;
    opacity: 1;
    transform: translateX(0);
    will-change: opacity, transform;
}


/* ---------- FORWARD / HOUSE BUILDS ---------- */

@media (hover: hover) and (pointer: fine) {

    /*
       IIRIS starts first, then TALONEN.
       Both slide toward the original wall while fading.
    */
    .animated-brand:hover .logo-word-iiris,
    .animated-brand:focus-visible .logo-word-iiris {
        opacity: 0;
        transform: translateX(-54px);

        transition:
            transform 620ms cubic-bezier(.4,0,.2,1) 40ms,
            opacity 330ms ease 300ms;
    }

    .animated-brand:hover .logo-word-talonen,
    .animated-brand:focus-visible .logo-word-talonen {
        opacity: 0;
        transform: translateX(-62px);

        transition:
            transform 680ms cubic-bezier(.4,0,.2,1) 110ms,
            opacity 340ms ease 390ms;
    }

    /*
       RAKENNUSARKKITEHTI follows last, as requested.
    */
    .animated-brand:hover .logo-word-subtitle,
    .animated-brand:focus-visible .logo-word-subtitle {
        opacity: 0;
        transform: translateX(-46px);

        transition:
            transform 640ms cubic-bezier(.4,0,.2,1) 330ms,
            opacity 320ms ease 610ms;
    }
}


/* Touch gets the same sequence. */
.animated-brand.is-animated .logo-word-iiris {
    opacity: 0;
    transform: translateX(-54px);

    transition:
        transform 620ms cubic-bezier(.4,0,.2,1) 40ms,
        opacity 330ms ease 300ms;
}

.animated-brand.is-animated .logo-word-talonen {
    opacity: 0;
    transform: translateX(-62px);

    transition:
        transform 680ms cubic-bezier(.4,0,.2,1) 110ms,
        opacity 340ms ease 390ms;
}

.animated-brand.is-animated .logo-word-subtitle {
    opacity: 0;
    transform: translateX(-46px);

    transition:
        transform 640ms cubic-bezier(.4,0,.2,1) 330ms,
        opacity 320ms ease 610ms;
}


/* ---------- REVERSE / HOUSE COLLAPSES ---------- */

/*
   Keep all text hidden while the house collapses.
   Then bring the text back FROM the wall toward the right.
   The subtitle appears last.
*/

.animated-brand.is-returning .logo-text {
    animation: none !important;
}

.animated-brand.is-returning .logo-word-iiris {
    animation:
        v75WordReturnIiris 430ms cubic-bezier(.22,.61,.36,1) 1800ms both;
}

.animated-brand.is-returning .logo-word-talonen {
    animation:
        v75WordReturnTalonen 470ms cubic-bezier(.22,.61,.36,1) 1910ms both;
}

.animated-brand.is-returning .logo-word-subtitle {
    animation:
        v75WordReturnSubtitle 430ms cubic-bezier(.22,.61,.36,1) 2130ms both;
}


@keyframes v75WordReturnIiris {
    0% {
        opacity: 0;
        transform: translateX(-54px);
    }
    45% {
        opacity: .42;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes v75WordReturnTalonen {
    0% {
        opacity: 0;
        transform: translateX(-62px);
    }
    45% {
        opacity: .42;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes v75WordReturnSubtitle {
    0% {
        opacity: 0;
        transform: translateX(-46px);
    }
    52% {
        opacity: .36;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/*
   Disable the older whole-group wordmark return so it cannot
   compete with the new per-line animation.
*/
.animated-brand:not(.is-returning):not(.is-animated) .logo-word {
    opacity: 1;
    transform: translateX(0);
}


/* Reduced motion: show/hide immediately without sliding. */
@media (prefers-reduced-motion: reduce) {
    .logo-word {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   V7.7 — CONTENT RHYTHM / TYPOGRAPHY / LOGICAL LAYOUT
   Layout-only refinement. Logo animation geometry is untouched.
   ========================================================= */

:root {
    --section-space: clamp(64px, 8vw, 120px);
}

/* More restrained editorial type scale */
.hero-title {
    font-size: clamp(48px, 14vw, 82px);
    line-height: .96;
}

.hero-intro {
    max-width: 520px;
    margin-top: clamp(22px, 5vw, 40px);
    font-size: clamp(16px, 4vw, 19px);
    line-height: 1.42;
}

.project {
    margin-bottom: clamp(64px, 12vw, 130px);
}

.project-title {
    font-size: clamp(24px, 6.8vw, 36px);
    line-height: 1.08;
}

.project-meta p {
    font-size: 11px;
    line-height: 1.5;
}

.project-index,
figcaption {
    font-size: 9px;
}

.section-heading {
    margin-bottom: clamp(30px, 5vw, 54px);
}

.section-number,
.section-title,
.info-title {
    font-size: 10px;
}

.about-layout {
    gap: clamp(38px, 6vw, 72px);
}

.about-lead {
    max-width: 1080px;
    font-size: clamp(29px, 7.6vw, 48px);
    line-height: 1.08;
}

.about-details {
    gap: 24px;
}

.info-text,
.tool-name {
    font-size: 13px;
}

.info-text {
    line-height: 1.6;
}

.contact-layout {
    gap: clamp(34px, 6vw, 64px);
}

.contact-lead {
    max-width: 900px;
    font-size: clamp(30px, 8vw, 52px);
    line-height: 1.06;
}

.contact-link,
.phone-number,
.contact-location {
    font-size: 12px;
}

/* Keep the compact mobile header genuinely on one row. */
@media (max-width: 760px) {
    .site-header {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr) 36px;
        align-items: center;
        column-gap: 5px;
        padding:
            max(7px, env(safe-area-inset-top))
            var(--page-pad)
            6px;
    }

    .header-top {
        display: contents;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;
        width: 96px;
        height: 54px;
        min-width: 0;
        flex: none;
        overflow: hidden;
    }

    .animated-logo {
        width: 100%;
        height: 100%;
    }

    .header-nav {
        grid-column: 2;
        grid-row: 1;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 40px;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nav-link {
        min-width: 0;
        min-height: 38px;
        padding: 0 1px;
        justify-content: center;
        font-size: clamp(6.5px, 1.95vw, 8.5px);
        letter-spacing: .025em;
        white-space: nowrap;
    }

    .menu-toggle {
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex: none;
        justify-self: end;
    }

    .settings-menu {
        top: calc(max(7px, env(safe-area-inset-top)) + 58px);
    }

    .hero {
        min-height: 92svh;
        padding-top: 82px;
        gap: 30px;
    }

    .eyebrow {
        margin-bottom: 16px;
    }

    .project-info {
        gap: 14px;
    }

    .project-meta {
        gap: 5px 16px;
    }

    .about-details {
        grid-template-columns: 1fr;
    }

    .contact-links {
        gap: 10px 16px;
    }
}

@media (max-width: 380px) {
    .site-header {
        grid-template-columns: 88px minmax(0, 1fr) 32px;
        column-gap: 3px;
    }

    .brand {
        width: 88px;
        height: 50px;
    }

    .menu-toggle {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .nav-link {
        font-size: 6.2px;
        letter-spacing: .005em;
    }

    .hero-title {
        font-size: 46px;
    }
}

/* Tablet: information becomes a clean three-column facts row. */
@media (min-width: 600px) and (max-width: 899px) {
    .about-details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .about-lead {
        font-size: clamp(38px, 6.5vw, 52px);
    }
}

/* Desktop: lead statement first, then full-width structured facts. */
@media (min-width: 900px) {
    .hero-title {
        font-size: clamp(76px, 7.3vw, 132px);
    }

    .hero-intro {
        font-size: clamp(17px, 1.35vw, 21px);
    }

    .project-title {
        font-size: clamp(30px, 2.7vw, 44px);
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: clamp(48px, 5vw, 76px);
        align-items: start;
    }

    .about-lead {
        max-width: 1180px;
        font-size: clamp(42px, 4.2vw, 68px);
    }

    .about-details {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(30px, 5vw, 80px);
    }

    .info-group {
        min-width: 0;
    }

    .info-text,
    .tool-name {
        font-size: 13px;
    }

    .contact-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
        gap: clamp(50px, 7vw, 120px);
        align-items: end;
    }

    .contact-lead {
        font-size: clamp(44px, 4.8vw, 76px);
    }
}

/* =========================================================
   V7.8 — ROBUST HERO SCALING + STRONGER SMOOTH HEADER BLUR
   ========================================================= */

/*
   Prevent intrinsic widths and browser default <figure> margins
   from pushing the desktop hero outside the viewport. This is
   especially important when a phone browser requests "Desktop site".
*/
main,
.hero,
.hero > *,
.hero figure {
    min-width: 0;
}

main,
.hero {
    width: 100%;
}

.hero figure {
    width: 100%;
    margin: 0;
}

.hero img,
.hero .project-image,
.hero .hero-image {
    max-width: 100%;
}


/*
   Make the desktop grid explicitly shrinkable. Using minmax(0,...)
   avoids the first column being pushed off-screen by large text or
   the second column by image intrinsic sizing.
*/
@media (min-width: 900px) {

    .hero {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.25fr);

        gap: clamp(28px, 4.5vw, 72px);

        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .hero > div,
    .hero > figure {
        min-width: 0;
        max-width: 100%;
    }

    .hero-title {
        max-width: 100%;
        font-size: clamp(68px, 7vw, 126px);
        overflow-wrap: normal;
    }

    .hero-image {
        width: 100%;
        min-width: 0;
        min-height: min(66vh, 720px);
    }
}


/*
   Narrow desktop widths (roughly what mobile browsers use in
   "Desktop site" mode) need a slightly tighter hero than a full PC.
*/
@media (min-width: 900px) and (max-width: 1100px) {

    .hero {
        grid-template-columns:
            minmax(0, .92fr)
            minmax(0, 1.08fr);

        gap: clamp(22px, 3vw, 42px);
    }

    .hero-title {
        font-size: clamp(62px, 6.6vw, 82px);
    }

    .hero-intro {
        font-size: 16px;
        line-height: 1.4;
    }

    .hero-image {
        min-height: min(58vh, 620px);
    }
}


/* =========================================================
   STRONGER FROSTED HEADER WITH A LONG, SOFT FADE
   ========================================================= */

.site-header {
    background: transparent !important;
    isolation: isolate;
}

/*
   The blur extends well below the navigation, then fades out
   gradually. The mask fades the blur itself, not just its colour,
   so there is no hard horizontal edge.
*/
.site-header::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;
    right: 0;

    height: 132px;

    background:
        linear-gradient(
            to bottom,
            var(--header-bg-1) 0%,
            var(--header-bg-1) 24%,
            var(--header-bg-2) 48%,
            color-mix(in srgb, var(--bg) 78%, transparent) 68%,
            color-mix(in srgb, var(--bg) 38%, transparent) 84%,
            transparent 100%
        );

    backdrop-filter: blur(20px) saturate(112%);
    -webkit-backdrop-filter: blur(20px) saturate(112%);

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 40%,
            rgba(0,0,0,.94) 52%,
            rgba(0,0,0,.76) 66%,
            rgba(0,0,0,.48) 79%,
            rgba(0,0,0,.20) 91%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 40%,
            rgba(0,0,0,.94) 52%,
            rgba(0,0,0,.76) 66%,
            rgba(0,0,0,.48) 79%,
            rgba(0,0,0,.20) 91%,
            transparent 100%
        );

    pointer-events: none;
}


/*
   Remove competing local blur layers if older rules are still
   present elsewhere in the stylesheet.
*/
.header-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/*
   Mobile header is shorter, but the blur still extends far enough
   below the labels to separate them from scrolling page text.
*/
@media (max-width: 760px) {

    .site-header::before {
        height: 108px;

        backdrop-filter: blur(18px) saturate(110%);
        -webkit-backdrop-filter: blur(18px) saturate(110%);
    }
}


/*
   On browsers without backdrop-filter support, keep a soft
   translucent gradient so navigation remains readable.
*/
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .site-header::before {
        background:
            linear-gradient(
                to bottom,
                var(--header-bg-1) 0%,
                var(--header-bg-2) 65%,
                transparent 100%
            );
    }
}

/* =========================================================
   V7.8.1 — DESKTOP HERO TOP SPACING
   ========================================================= */

@media (min-width: 900px) {
    .hero {
        padding-top: 80px;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .hero {
        padding-top: 65px;
    }
}

/* =========================================================
   INLINE CV VIEWER
   ========================================================= */

.cv-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 180ms ease, opacity 180ms ease;
}

.cv-link:hover,
.cv-link:focus-visible {
    border-bottom-color: currentColor;
}

.cv-link-arrow {
    display: inline-block;
    transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}

.cv-link[aria-expanded="true"] .cv-link-arrow {
    transform: rotate(180deg);
}

.cv-panel {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    transition:
        grid-template-rows 650ms cubic-bezier(.22,.61,.36,1),
        opacity 350ms ease,
        margin-top 650ms cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 650ms;
}

.cv-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    margin-top: clamp(34px, 5vw, 70px);
    transition:
        grid-template-rows 650ms cubic-bezier(.22,.61,.36,1),
        opacity 420ms ease 100ms,
        margin-top 650ms cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 0s;
}

.cv-panel-inner {
    min-height: 0;
    overflow: hidden;
}

.cv-pages {
    display: grid;
    gap: clamp(12px, 2vw, 24px);
    justify-items: center;
    padding: clamp(10px, 2vw, 22px) 0;
}

.cv-page-wrap {
    position: relative;
    width: min(100%, 900px);
    max-width: 100%;
    background: #fff;
    box-shadow: 0 12px 38px rgba(0,0,0,.09);
    overflow: hidden;
}

.cv-page-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 2;
}

.textLayer span,
.textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
}

.textLayer ::selection {
    background: rgba(60, 120, 255, .28);
}

.textLayer .markedContent {
    top: 0;
    height: 0;
}

.cv-status {
    padding: 22px 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .04em;
}

.cv-status.is-hidden {
    display: none;
}

@media (max-width: 760px) {
    .cv-panel.is-open {
        margin-top: 28px;
    }

    .cv-pages {
        gap: 8px;
        padding: 8px 0;
    }

    .cv-page-wrap {
        width: 100%;
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
}

/* =========================================================
   INLINE CV — MOBILE PLACEMENT FIX
   ========================================================= */

/*
   On mobile JS moves the CV panel directly after the "Avaa CV"
   button inside the Profile block. This makes the expansion happen
   exactly where the user tapped, before Painopisteet / Työkalut.
*/
@media (max-width: 760px) {

    .info-group .cv-panel {
        width: 100%;
        grid-column: 1 / -1;
    }

    .info-group .cv-panel.is-open {
        margin-top: 20px;
        margin-bottom: 24px;
    }

    .info-group .cv-panel-inner {
        width: 100%;
    }

    .info-group .cv-pages {
        width: 100%;
    }
}



/* =========================================================
   INLINE CV — DOWNLOAD BUTTON
   ========================================================= */
.cv-actions {
    display: flex;
    justify-content: flex-end;
    width: min(100%, 900px);
    margin: 0 auto 12px;
}

.cv-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0 4px;
    color: var(--text);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    transition: border-color 180ms ease, opacity 180ms ease;
}

.cv-download:hover,
.cv-download:focus-visible {
    border-bottom-color: currentColor;
}

@media (max-width: 760px) {
    .cv-actions {
        width: 100%;
        margin-bottom: 8px;
        padding: 0 4px;
    }
}

/* =========================================================
   INLINE CV — SELECTABLE TEXT LAYER
   ========================================================= */

.cv-page-wrap {
    user-select: text;
    -webkit-user-select: text;
}

.textLayer {
    user-select: text;
    -webkit-user-select: text;
}

.textLayer span {
    user-select: text;
    -webkit-user-select: text;
}

/* =========================================================
   V7.9 — DESKTOP HERO BALANCE
   ========================================================= */

/*
   Keep the large architectural image on the right, but move the
   introduction into the visual centre of the image instead of
   anchoring it near the bottom of the viewport.
*/
@media (min-width: 1101px) {
    .hero {
        min-height: 100svh;
        grid-template-columns:
            minmax(0, .82fr)
            minmax(0, 1.18fr);
        gap: clamp(42px, 5vw, 86px);
        align-items: center;
        padding-top: 80px;
        padding-bottom: clamp(42px, 5vh, 72px);
    }

    .hero > div {
        align-self: center;
        max-width: 610px;
        padding-bottom: 2vh;
    }

    .hero > figure {
        align-self: center;
    }

    .hero-image {
        min-height: min(68vh, 760px);
    }

    .hero-intro {
        max-width: 470px;
    }
}

/* =========================================================
   V7.10 — LARGER DESKTOP ANIMATED LOGO
   ========================================================= */

/*
   The inline SVG uses a 900 x 500 viewBox. The previous desktop
   brand box was much too shallow, so preserveAspectRatio scaled
   the whole logo down based on its height. Give the brand box a
   shape closer to the SVG itself so the visible logo — including
   every animated element — grows proportionally.
*/
@media (min-width: 1101px) {
    .brand {
        width: clamp(190px, 12vw, 230px);
        height: clamp(78px, 5.5vw, 96px);
        flex: 0 0 auto;
        overflow: visible;
    }

    .animated-logo {
        width: 100%;
        height: 100%;
        display: block;
    }
}

/* =========================================================
   V7.11 — CRISP DESKTOP LOGO TEXT
   ========================================================= */

/*
   Keep the resting SVG paths fully vector-rendered. A permanent
   transform/will-change on the tiny wordmark paths can make Chromium
   promote them to a raster layer, which looks soft at this scale.
*/
@media (min-width: 1101px) {
    .animated-logo {
        shape-rendering: geometricPrecision;
        text-rendering: geometricPrecision;
    }

    .logo-word {
        will-change: auto;
        transform: none;
    }

    /*
       The subtitle in the source logo is physically very small.
       Give it a modest optical enlargement while retaining its
       original position and visual character.
    */
    .logo-word-subtitle {
        transform-box: fill-box;
        transform-origin: left center;
        transform: scale(1.16);
    }

    .animated-brand:hover .logo-word,
    .animated-brand:focus-visible .logo-word,
    .animated-brand.is-animated .logo-word,
    .animated-brand.is-returning .logo-word {
        will-change: opacity, transform;
    }

    .animated-brand:not(:hover):not(:focus-visible):not(.is-animated):not(.is-returning)
    .logo-word-subtitle {
        transform: scale(1.16);
    }
}

/* =========================================================
   V7.12 — LARGER BRAND MARK
   ========================================================= */

@media (min-width: 1101px) {
    .brand {
        width: clamp(215px, 13.5vw, 260px);
        height: clamp(88px, 6.2vw, 108px);
    }
}

@media (max-width: 1100px) {
    .brand {
        width: 108px;
        height: 61px;
    }
}

@media (max-width: 480px) {
    .brand {
        width: 100px;
        height: 57px;
    }
}

/* =========================================================
   V7.13 — PROJECT IMAGE GALLERIES
   ========================================================= */

.project-gallery {
    position: relative;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    background-position: center;
    background-size: cover;
    transition: opacity 180ms ease;
}

.project-gallery.has-gallery {
    cursor: grab;
}

.project-gallery.has-gallery.is-dragging {
    cursor: grabbing;
}

.project-gallery-controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: clamp(12px, 1.6vw, 22px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 34px auto 34px;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(12px) saturate(108%);
    -webkit-backdrop-filter: blur(12px) saturate(108%);
}

.project-gallery-button {
    appearance: none;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: .72;
    transition: opacity 160ms ease, transform 160ms ease;
}

.project-gallery-button:hover,
.project-gallery-button:focus-visible {
    opacity: 1;
}

.project-gallery-previous:hover {
    transform: translateX(-2px);
}

.project-gallery-next:hover {
    transform: translateX(2px);
}

.project-gallery-counter {
    min-width: 58px;
    color: var(--text);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .08em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.project-gallery:focus-visible {
    outline: 1px solid var(--text);
    outline-offset: 4px;
}

@media (max-width: 760px) {
    .project-gallery-controls {
        bottom: 10px;
        grid-template-columns: 32px auto 32px;
        min-width: 140px;
        padding: 4px 6px;
    }

    .project-gallery-button {
        width: 32px;
        height: 30px;
    }

    .project-gallery-counter {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-gallery,
    .project-gallery-button {
        transition: none;
    }
}

/* =========================================================
   V7.14 — THESIS LINK
   ========================================================= */

.about-thesis {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: clamp(14px, 3vw, 42px);
    width: 100%;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    transition: opacity 180ms ease;
}

.about-thesis:hover,
.about-thesis:focus-visible {
    opacity: .68;
}

.about-thesis-label,
.about-thesis-action {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.about-thesis-title {
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.25;
}

.about-thesis-action {
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 760px) {
    .about-thesis {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 12px 0;
    }

    .about-thesis-label {
        grid-column: 1 / -1;
    }

    .about-thesis-title {
        font-size: 15px;
    }

    .about-thesis-action {
        align-self: end;
        font-size: 8px;
    }
}

/* =========================================================
   V7.15 — LIVE DRAG PROJECT GALLERY
   ========================================================= */

.project-gallery {
    padding: 0;
    display: block;
}

.project-gallery-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0,0,0);
}

.project-gallery-track.is-animating {
    transition:
        transform 440ms cubic-bezier(.22,.61,.36,1);
}

.project-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.project-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
}

.project-gallery.is-dragging .project-gallery-track {
    transition: none !important;
}

.project-gallery.has-image::before,
.project-gallery.has-image .project-image-inner {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .project-gallery-track.is-animating {
        transition: none;
    }
}

/* =========================================================
   V7.16 — NEPPERSINMÄKI BROCHURE PRESENTATION
   ========================================================= */

/*
   The thesis / brochure spreads are landscape pages rather than
   full-bleed photographs. Show them in their original composition
   instead of cropping typography and drawings with object-fit: cover.
*/
.project-neppersinmaki {
    aspect-ratio: 1.414 / 1;
    background: #f4f3ee;
}

.project-neppersinmaki .project-gallery-slide {
    background: #f4f3ee;
}

.project-neppersinmaki .project-gallery-image {
    object-fit: contain;
    object-position: center;
}

[data-theme="dark"] .project-neppersinmaki,
[data-theme="dark"] .project-neppersinmaki .project-gallery-slide {
    background: #deddd7;
}

@media (max-width: 760px) {
    .project-neppersinmaki {
        aspect-ratio: 1.414 / 1;
    }
}

/* =========================================================
   V7.17 — RESPONSIVE PROJECT PICTURES
   ========================================================= */

.project-gallery-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.project-gallery-picture > source {
    display: none;
}

.project-gallery-picture .project-gallery-image {
    width: 100%;
    height: 100%;
}

/* =========================================================
   V7.18 — VIEWPORT-FIT PROJECT GALLERY
   ========================================================= */

/*
   Neppersinmäki masters are 16:9 renders. On desktop, cap the gallery
   by both available page width and viewport height so the complete
   image, controls and project metadata can be seen without the image
   extending below a normal laptop/desktop viewport.
*/
.project-neppersinmaki {
    aspect-ratio: 16 / 9;
}

@media (min-width: 761px) {
    .project:first-child .project-neppersinmaki {
        width: min(100%, calc((100svh - 210px) * 16 / 9));
        max-height: calc(100svh - 210px);
        margin-inline: auto;
    }

    .project-neppersinmaki .project-gallery-image {
        object-fit: contain !important;
    }
}

@media (max-width: 760px) {
    .project-neppersinmaki {
        aspect-ratio: 16 / 9;
        width: 100%;
    }
}

/* =========================================================
   V7.19 — COMPACT PROJECT GALLERY + LIGHTBOX
   ========================================================= */

/* Keep the portfolio image comfortably inside a real browser viewport. */
@media (min-width: 761px) {
    .project:first-child .project-neppersinmaki {
        width: min(100%, 1180px, calc((100dvh - 300px) * 16 / 9));
        max-height: calc(100dvh - 300px);
        min-height: 360px;
        margin-inline: auto;
    }
}

.project-gallery.has-image {
    cursor: zoom-in;
}

.project-gallery.has-gallery.is-dragging {
    cursor: grabbing;
}

body.lightbox-open {
    overflow: hidden;
}

.project-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(48px, 6vw, 88px);
    background: rgba(15, 15, 14, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.project-lightbox-stage {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.project-lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.project-lightbox-close,
.project-lightbox-nav {
    position: absolute;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
    opacity: .76;
    transition: opacity 160ms ease, transform 160ms ease;
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover,
.project-lightbox-close:focus-visible,
.project-lightbox-nav:focus-visible {
    opacity: 1;
}

.project-lightbox-close {
    top: 18px;
    right: 24px;
    width: 42px;
    height: 42px;
    font-size: 30px;
    line-height: 1;
}

.project-lightbox-nav {
    top: 50%;
    width: 48px;
    height: 64px;
    transform: translateY(-50%);
    font-size: 22px;
}

.project-lightbox-prev {
    left: 18px;
}

.project-lightbox-next {
    right: 18px;
}

.project-lightbox-prev:hover {
    transform: translate(-3px, -50%);
}

.project-lightbox-next:hover {
    transform: translate(3px, -50%);
}

.project-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 10px;
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .project-lightbox {
        padding: 54px 12px 48px;
    }

    .project-lightbox-nav {
        top: auto;
        bottom: 8px;
        width: 44px;
        height: 40px;
        transform: none;
    }

    .project-lightbox-prev {
        left: 14px;
    }

    .project-lightbox-next {
        right: 14px;
    }

    .project-lightbox-prev:hover {
        transform: translateX(-2px);
    }

    .project-lightbox-next:hover {
        transform: translateX(2px);
    }

    .project-lightbox-close {
        top: 8px;
        right: 10px;
    }
}

/* =========================================================
   V7.20 — SMALLER PROJECT GALLERY + NATIVE FULLSCREEN VIEWER
   ========================================================= */

/*
   Keep the project image comfortably visible together with the page
   chrome and project metadata on common laptop/desktop displays.
*/
@media (min-width: 761px) {
    .project:first-child .project-neppersinmaki {
        width: min(
            100%,
            980px,
            calc(min(52dvh, 520px) * 16 / 9)
        );
        height: min(52dvh, 520px);
        min-height: 0;
        max-height: 520px;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        border: 1px solid var(--line);
        background: var(--bg);
    }

    .project:first-child .project-neppersinmaki .project-gallery-image {
        object-fit: contain !important;
    }
}

/*
   Native dialog renders in the browser's top layer, so it cannot fall
   into the document flow or appear at the bottom of the page.
*/
.project-lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.project-lightbox::backdrop {
    background: rgba(13, 13, 12, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.project-lightbox-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(54px, 6vw, 88px);
    background: rgba(13, 13, 12, .96);
}

.project-lightbox-stage {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
}

.project-lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.project-lightbox-close,
.project-lightbox-nav {
    position: fixed;
    z-index: 2;
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
    opacity: .78;
    transition: opacity 160ms ease, transform 160ms ease;
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover,
.project-lightbox-close:focus-visible,
.project-lightbox-nav:focus-visible {
    opacity: 1;
}

.project-lightbox-close {
    top: 14px;
    right: 18px;
    width: 48px;
    height: 48px;
    font-size: 34px;
    line-height: 1;
}

.project-lightbox-nav {
    top: 50%;
    width: 52px;
    height: 70px;
    transform: translateY(-50%);
    font-size: 24px;
}

.project-lightbox-prev {
    left: 14px;
}

.project-lightbox-next {
    right: 14px;
}

.project-lightbox-prev:hover {
    transform: translate(-3px, -50%);
}

.project-lightbox-next:hover {
    transform: translate(3px, -50%);
}

.project-lightbox-counter {
    position: fixed;
    z-index: 2;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 10px;
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .project-lightbox-viewer {
        padding: 58px 12px 54px;
    }

    .project-lightbox-close {
        top: 6px;
        right: 8px;
    }

    .project-lightbox-nav {
        top: auto;
        bottom: 7px;
        width: 44px;
        height: 40px;
        transform: none;
    }

    .project-lightbox-prev {
        left: 12px;
    }

    .project-lightbox-next {
        right: 12px;
    }

    .project-lightbox-prev:hover {
        transform: translateX(-2px);
    }

    .project-lightbox-next:hover {
        transform: translateX(2px);
    }

    .project-lightbox-counter {
        bottom: 20px;
    }
}

/* =========================================================
   V7.21 — BALANCED GALLERY SIZE + LIGHTBOX SLIDE MOTION
   ========================================================= */

/* A middle ground between the previous 520px and the earlier large view. */
@media (min-width: 761px) {
    .project:first-child .project-neppersinmaki {
        width: min(
            100%,
            1080px,
            calc(min(60dvh, 600px) * 16 / 9)
        );
        height: min(60dvh, 600px);
        max-height: 600px;
        min-height: 0;
    }
}

/* Fullscreen viewer keeps two images stacked and slides only old/new pair. */
.project-lightbox-stage {
    position: relative;
    overflow: hidden;
}

.project-lightbox-image {
    position: absolute;
    inset: 0;
    margin: auto;
    transition:
        transform 360ms cubic-bezier(.22,.61,.36,1),
        opacity 180ms ease;
    will-change: transform;
}

.project-lightbox-image.is-current {
    transform: translate3d(0,0,0);
    opacity: 1;
}

.project-lightbox-image.is-incoming {
    transform: translate3d(100%,0,0);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .project-lightbox-image {
        transition: none !important;
    }
}

/* =========================================================
   V7.22 — UNIFIED GALLERY CONTROLS
   ========================================================= */

/*
   Match the in-page gallery controls to the circular hamburger button:
   same diameter, border weight and surface treatment.
*/
.project-gallery-controls {
    bottom: clamp(12px, 1.5vw, 18px);
    display: grid;
    grid-template-columns: 42px auto 42px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.project-gallery-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    font-size: 14px;
    opacity: 1;
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 160ms ease;
}

.project-gallery-button:hover,
.project-gallery-button:focus-visible {
    background: var(--surface);
}

.project-gallery-counter {
    min-width: 58px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    font-size: 9px;
}

/*
   Fullscreen controls use the same design language, inverted for the
   dark viewer background.
*/
.project-lightbox-close,
.project-lightbox-nav {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 50%;
    background: rgba(24,24,23,.54);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    opacity: 1;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 160ms ease;
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover,
.project-lightbox-close:focus-visible,
.project-lightbox-nav:focus-visible {
    background: rgba(40,40,38,.82);
    border-color: rgba(255,255,255,.55);
}

.project-lightbox-close {
    top: 16px;
    right: 18px;
    font-size: 25px;
}

.project-lightbox-nav {
    top: 50%;
    font-size: 15px;
}

.project-lightbox-prev {
    left: 18px;
}

.project-lightbox-next {
    right: 18px;
}

.project-lightbox-counter {
    min-width: 66px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(24,24,23,.54);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
}

/* Pointer dragging in fullscreen should feel like the normal gallery. */
.project-lightbox-stage {
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.project-lightbox-stage.is-dragging {
    cursor: grabbing;
}

@media (max-width: 760px) {
    .project-gallery-controls {
        grid-template-columns: 38px auto 38px;
        gap: 8px;
    }

    .project-gallery-button {
        width: 38px;
        height: 38px;
    }

    .project-lightbox-nav {
        top: auto;
        bottom: 10px;
        width: 40px;
        height: 40px;
        transform: none;
    }

    .project-lightbox-prev {
        left: 12px;
    }

    .project-lightbox-next {
        right: 12px;
    }

    .project-lightbox-close {
        width: 40px;
        height: 40px;
        top: 8px;
        right: 10px;
    }
}

/* =========================================================
   V7.23 — QUIET ARCHITECTURAL GALLERY CONTROLS
   ========================================================= */

/*
   Controls are intentionally lighter than the hamburger. The menu is
   a primary UI control; gallery navigation should sit quietly on top
   of the architecture rather than look like three floating menu buttons.
*/
.project-gallery-controls {
    grid-template-columns: 32px auto 32px;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.project-gallery-button {
    width: 32px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 13px;
    opacity: .68;
}

.project-gallery-button:hover,
.project-gallery-button:focus-visible {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    opacity: 1;
}

.project-gallery-counter {
    min-width: 54px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 8px;
}

/* Fullscreen: slim edge controls + one compact close control. */
.project-lightbox-nav {
    width: 44px;
    height: 64px;
    border: 0;
    border-radius: 3px;
    background: rgba(18,18,17,.26);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 28px;
    font-family: Arial, sans-serif;
    font-weight: 200;
    opacity: .62;
}

.project-lightbox-nav:hover,
.project-lightbox-nav:focus-visible {
    background: rgba(18,18,17,.52);
    border-color: transparent;
    opacity: 1;
}

.project-lightbox-nav > span {
    display: block;
    transform: translateY(-1px);
}

.project-lightbox-close {
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(18,18,17,.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.project-lightbox-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 1px;
    background: #fff;
    transform-origin: center;
}

.project-lightbox-close span:first-child {
    transform: translate(-50%,-50%) rotate(45deg);
}

.project-lightbox-close span:last-child {
    transform: translate(-50%,-50%) rotate(-45deg);
}

.project-lightbox-close:hover,
.project-lightbox-close:focus-visible {
    background: rgba(18,18,17,.62);
    border-color: rgba(255,255,255,.52);
}

.project-lightbox-counter {
    min-width: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(18,18,17,.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 8px;
    opacity: .8;
}

/* The three fullscreen slides are permanently present and preloaded. */
.project-lightbox-image {
    opacity: 1 !important;
    transition:
        transform 380ms cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
}

.project-lightbox-stage.is-dragging .project-lightbox-image {
    transition: none !important;
}

@media (max-width: 760px) {
    .project-lightbox-nav {
        width: 40px;
        height: 42px;
        border-radius: 3px;
        font-size: 25px;
    }

    .project-lightbox-close {
        width: 40px;
        height: 40px;
        top: 9px;
        right: 10px;
    }
}


/* =========================================================
   V7.24 — NATIVE SCROLL-SNAP FULLSCREEN VIEWER
   ========================================================= */

/* Override the earlier experimental transform-based lightbox rules. */
.project-lightbox-viewer {
    overflow: hidden;
}

.project-lightbox-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.project-lightbox-track::-webkit-scrollbar {
    display: none;
}

.project-lightbox-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.project-lightbox-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: clamp(58px, 6vw, 88px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.project-lightbox-slide .project-lightbox-image {
    position: static !important;
    inset: auto !important;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
}

.project-lightbox-nav {
    display: grid;
    place-items: center;
    padding: 0;
}

.project-lightbox-nav svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
}

.project-lightbox-nav path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-lightbox-nav > span {
    transform: none;
}

@media (max-width: 760px) {
    .project-lightbox-slide {
        padding: 58px 12px 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-lightbox-track {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   V7.25 — ONE GALLERY MOTION MODEL + CENTERED CHEVRONS
   ========================================================= */

/*
   Fullscreen now uses the same transform-track interaction as the
   in-page gallery. These rules replace the experimental scroll-snap
   implementation from V7.24.
*/
.project-lightbox-track.project-lightbox-transform-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: none;
    scrollbar-width: auto;
    touch-action: none;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    transform: translate3d(0,0,0);
    will-change: transform;
}

.project-lightbox-track.project-lightbox-transform-track.is-animating {
    transition:
        transform 440ms cubic-bezier(.22,.61,.36,1);
}

.project-lightbox-stage.is-dragging
.project-lightbox-track.project-lightbox-transform-track {
    transition: none !important;
}

.project-lightbox-track.project-lightbox-transform-track::-webkit-scrollbar {
    display: none;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    padding: clamp(58px, 6vw, 88px);
    display: grid;
    place-items: center;
    scroll-snap-align: none;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-image {
    position: static !important;
    inset: auto !important;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
}

/*
   One SVG chevron geometry is used everywhere. Grid centering avoids
   font baseline differences that made the old arrow glyphs look offset.
*/
.project-gallery-button,
.project-lightbox-nav {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 0;
}

.gallery-chevron {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
    pointer-events: none;
}

.gallery-chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-gallery-button .gallery-chevron {
    width: 16px;
    height: 16px;
}

.project-lightbox-nav .gallery-chevron {
    width: 20px;
    height: 20px;
}

@media (max-width: 760px) {
    .project-lightbox-track.project-lightbox-transform-track
    .project-lightbox-slide {
        padding: 58px 12px 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-lightbox-track.project-lightbox-transform-track.is-animating {
        transition: none !important;
    }
}


/* =========================================================
   V7.26 — HOMEPAGE HERO GALLERY
   ========================================================= */

.hero-gallery {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
}

.hero-gallery.is-dragging {
    cursor: grabbing;
}

.hero-gallery-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.hero-gallery-track.is-animating {
    transition: transform 440ms cubic-bezier(.22,.61,.36,1);
}

.hero-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.hero-gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-gallery-controls {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: clamp(12px, 1.5vw, 18px);
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 32px auto 32px;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(20,20,19,.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
}

.hero-gallery-button {
    width: 32px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    opacity: .78;
}

.hero-gallery-button:hover,
.hero-gallery-button:focus-visible {
    background: rgba(255,255,255,.12);
    opacity: 1;
}

.hero-gallery-counter {
    min-width: 54px;
    text-align: center;
    font-size: 8px;
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}

.hero-gallery-button .gallery-chevron {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-gallery-track.is-animating {
        transition: none;
    }
}


/* =========================================================
   V7.27 — IMAGE RATIO SAFETY
   ========================================================= */

/*
   Portfolio images should never be cropped merely to fill their frame.
   Preserve the complete architectural image and let the surrounding
   surface absorb any difference in source aspect ratio.
*/
.hero-gallery {
    background: var(--surface);
}

.hero-gallery-slide {
    display: grid;
    place-items: center;
    background: var(--surface);
}

.hero-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Project galleries follow the same rule on every project, not only
   Neppersinmäki. The frame stays consistent while the source image
   keeps its original proportions. */
.project-gallery-slide,
.project-gallery-track {
    background: var(--surface);
}

.project-gallery-image {
    object-fit: contain !important;
    object-position: center;
}

/* Fullscreen already uses contain; keep this explicit as the shared
   portfolio-image policy. */
.project-lightbox-image {
    object-fit: contain !important;
    object-position: center;
}


/* =========================================================
   V7.28 — HERO GALLERY MATCHES PROJECT GALLERY
   ========================================================= */

/*
   The temporary hero images are 16:9, so make the hero frame itself
   16:9 instead of placing a 16:9 image inside the old tall placeholder.
   This removes the visible top/bottom bands without cropping the image.
*/
.hero-image.hero-gallery {
    width: 100%;
    min-height: 0 !important;
    height: auto;
    aspect-ratio: 16 / 9;
    background: transparent;
}

.hero-gallery-slide {
    background: transparent;
}

.hero-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Same quiet overlay control treatment as the project gallery. */
.hero-gallery-controls {
    left: 50%;
    bottom: clamp(12px, 1.5vw, 18px);
    transform: translateX(-50%);
    grid-template-columns: 32px auto 32px;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(20,20,19,.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 760px) {
    .hero-image.hero-gallery {
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
    }

    .hero-gallery-controls {
        bottom: 10px;
    }
}


/* =========================================================
   V7.29 — THESIS FEATURE CARD + TYPOGRAPHY CONSISTENCY
   ========================================================= */

.about-thesis,
.about-thesis * {
    font-family: inherit;
}

@media (min-width: 761px) {
    .about-thesis {
        position: relative;
        grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(24px, 4vw, 64px);
        padding: 22px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        opacity: 1;
    }

    .about-thesis::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--surface);
        opacity: 0;
        transition: opacity 180ms ease;
    }

    .about-thesis:hover,
    .about-thesis:focus-visible {
        opacity: 1;
    }

    .about-thesis:hover::after,
    .about-thesis:focus-visible::after {
        opacity: .55;
    }

    .about-thesis-meta {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .about-thesis-label,
    .about-thesis-year,
    .about-thesis-action {
        font-family: inherit;
        font-size: 10px;
        line-height: 1;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .about-thesis-year {
        opacity: .48;
    }

    .about-thesis-title {
        font-family: inherit;
        font-size: clamp(18px, 1.6vw, 24px);
        line-height: 1.18;
        letter-spacing: -.015em;
    }

    .about-thesis-action {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        white-space: nowrap;
    }

    .about-thesis-action svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.15;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 180ms ease;
    }

    .about-thesis:hover .about-thesis-action svg {
        transform: translate(2px,-2px);
    }
}


/* =========================================================
   V7.30 — EDITORIAL ARCHITECTURAL TYPE + PROFILE ACTIONS
   ========================================================= */

/*
   Use an editorial serif for the expressive layer only. The sans-serif
   body copy stays precise and technical; headings gain a more drawn,
   architectural character without turning decorative everywhere.
*/
:root {
    --display-font: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.hero-title,
.section-title,
.about-lead,
.project-title,
.contact-lead {
    font-family: var(--display-font);
    font-weight: 400;
    letter-spacing: -.025em;
}

.hero-title,
.section-title {
    font-variant-ligatures: common-ligatures;
}

.section-title {
    font-style: italic;
    letter-spacing: -.018em;
}

.project-title {
    letter-spacing: -.015em;
}

.about-lead {
    line-height: 1.32;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.profile-action-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.profile-action-button:hover,
.profile-action-button:focus-visible {
    border-color: currentColor;
    background: var(--surface);
    transform: translateY(-1px);
}

.cv-link.profile-action-button {
    border-bottom: 1px solid var(--line);
}

.thesis-button > span:last-child {
    font-size: 12px;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .section-title {
        font-style: normal;
    }

    .profile-actions {
        gap: 7px;
    }
}

/* Retire the former full-width thesis feature on desktop. */
@media (min-width: 761px) {
    .about-thesis {
        display: none !important;
    }
}


/* =========================================================
   V7.31 — SIMPLIFIED TYPE SYSTEM + SAFE DISPLAY SPACING
   ========================================================= */

/*
   Keep the site to two clear type voices:
   - the existing sans-serif for all interface, section headings and copy
   - the editorial serif only for the main name/hero statement
   This removes the inconsistent mix introduced in V7.30.
*/
.section-title,
.about-lead,
.project-title,
.contact-lead {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
}

/* Small section headings should match the rest of the UI exactly. */
.section-title {
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Project titles remain prominent without introducing another typeface. */
.project-title {
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.12;
}

/*
   Large paragraphs need normal tracking. Negative tracking on the serif
   was causing combinations such as "yhteistyö" to visually collide.
*/
.about-lead {
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.18;
}

.contact-lead {
    font-weight: 400;
    letter-spacing: -.012em;
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

/* Give the contact statement a slightly calmer scale on desktop. */
@media (min-width: 900px) {
    .contact-lead {
        max-width: 980px;
        font-size: clamp(40px, 4.15vw, 66px);
        line-height: 1.16;
    }
}

/* On mobile, keep enough leading for Finnish/Swedish descenders and y's. */
@media (max-width: 760px) {
    .about-lead {
        line-height: 1.2;
    }

    .contact-lead {
        font-size: clamp(28px, 7.2vw, 46px);
        line-height: 1.18;
        letter-spacing: -.006em;
    }
}


/* =========================================================
   V7.32 — PROJECT DESCRIPTIONS / SEO COPY
   ========================================================= */

.project-description {
    grid-column: 1 / -1;
    max-width: 68ch;
    margin: 18px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(13px, .9vw, 15px);
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .project-description {
        margin-top: 12px;
        max-width: none;
        font-size: 13px;
        line-height: 1.5;
    }
}


/* =========================================================
   V7.33 — FULLSCREEN VIEWPORT FIT
   ========================================================= */

/*
   Fullscreen images must always fit inside the *current* visual viewport,
   including after a phone rotates. Each slide owns the safe-area padding;
   the image then expands as far as possible without cropping.
*/
.project-lightbox,
.project-lightbox-viewer,
.project-lightbox-stage,
.project-lightbox-track.project-lightbox-transform-track,
.project-lightbox-track.project-lightbox-transform-track .project-lightbox-slide {
    box-sizing: border-box;
}

.project-lightbox,
.project-lightbox-viewer {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
}

.project-lightbox-viewer {
    padding: 0;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-slide {
    padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Controls float over the image, so they do not unnecessarily shrink
   the available image area. */
.project-lightbox-close {
    top: max(6px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
}

.project-lightbox-counter {
    bottom: max(8px, env(safe-area-inset-bottom));
}

@media (orientation: landscape) and (max-height: 600px) {
    .project-lightbox-track.project-lightbox-transform-track
    .project-lightbox-slide {
        padding:
            max(6px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .project-lightbox-nav {
        top: 50%;
        bottom: auto;
        width: 44px;
        height: 52px;
        transform: translateY(-50%);
    }

    .project-lightbox-prev {
        left: max(4px, env(safe-area-inset-left));
    }

    .project-lightbox-next {
        right: max(4px, env(safe-area-inset-right));
    }

    .project-lightbox-prev:hover {
        transform: translate(-2px, -50%);
    }

    .project-lightbox-next:hover {
        transform: translate(2px, -50%);
    }
}

.hero-gallery-slide img {
    cursor: zoom-in;
}


/* =========================================================
   V7.34 — LANDSCAPE FULLSCREEN HARD FIT
   ========================================================= */
/*
   Android browsers can report a landscape layout viewport taller than
   the visible viewport. JS supplies the actual visualViewport height;
   these rules ensure no descendant can exceed it.
*/
.project-lightbox-viewer,
.project-lightbox-stage,
.project-lightbox-track.project-lightbox-transform-track,
.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-slide {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-slide {
    box-sizing: border-box;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-image {
    display: block;
    inline-size: auto !important;
    block-size: auto !important;
    max-inline-size: 100% !important;
    max-block-size: 100% !important;
    object-fit: contain !important;
}


/* =========================================================
   V7.35 — LIGHTBOX FIT FIX
   ========================================================= */
/* Undo the V7.34 percentage max-height chain that could collapse the
   fullscreen slides to zero height. Fit against the viewport directly. */
.project-lightbox-viewer,
.project-lightbox-stage,
.project-lightbox-track.project-lightbox-transform-track {
    min-height: 0 !important;
    max-height: none !important;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-slide {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

.project-lightbox-track.project-lightbox-transform-track
.project-lightbox-image {
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    object-fit: contain !important;
    flex: 0 1 auto;
}


/* =========================================================
   V7.36 — CLEAN FULLSCREEN MODAL
   =========================================================
   Deliberately overrides the accumulated V7.20–V7.35 lightbox
   experiments. One viewport-sized stage, one image, object-fit: contain.
   ========================================================= */

.project-lightbox.project-lightbox-simple {
    position: fixed !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    background: rgba(13, 13, 12, .96) !important;
}

.project-lightbox.project-lightbox-simple::backdrop {
    background: rgba(13, 13, 12, .96);
}

.project-lightbox-simple .project-lightbox-viewer {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: transparent !important;
}

.project-lightbox-simple .project-lightbox-stage {
    position: absolute !important;
    inset:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    touch-action: none;
}

.project-lightbox-simple .project-lightbox-image {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center;
    opacity: 1 !important;
    transition: none !important;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.project-lightbox-simple .project-lightbox-close,
.project-lightbox-simple .project-lightbox-nav,
.project-lightbox-simple .project-lightbox-counter {
    position: absolute !important;
    z-index: 3;
}

.project-lightbox-simple .project-lightbox-close {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
}

.project-lightbox-simple .project-lightbox-counter {
    left: 50% !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
}

.project-lightbox-simple .project-lightbox-prev {
    left: max(10px, env(safe-area-inset-left)) !important;
}

.project-lightbox-simple .project-lightbox-next {
    right: max(10px, env(safe-area-inset-right)) !important;
}

.project-lightbox-simple .project-lightbox-nav {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 760px) {
    .project-lightbox-simple .project-lightbox-stage {
        inset:
            max(6px, env(safe-area-inset-top))
            max(6px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left)) !important;
    }
}


/* =========================================================
   V7.37 — FULLSCREEN MOTION MATCHES IN-PAGE GALLERIES
   ========================================================= */

.project-lightbox-simple .project-lightbox-stage {
    display: block !important;
}

.project-lightbox-simple-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0);
    will-change: transform;
}

.project-lightbox-simple-track.is-animating {
    transition: transform 440ms cubic-bezier(.22,.61,.36,1);
}

.project-lightbox-simple-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.project-lightbox-simple
.project-lightbox-simple-slide
.project-lightbox-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .project-lightbox-simple-track.is-animating {
        transition: none !important;
    }
}


/* Internal dashboard entry, after the public menu settings. */
.dashboard-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
}
.dashboard-menu-link:hover {
    color: var(--text);
    border-color: var(--text);
}
.dashboard-menu-link:focus-visible {
    color: var(--text);
    outline: 2px solid var(--text);
    outline-offset: 3px;
}