/* ========================================
   Studio Taktil Website
   Mobile-First Design - 19.5:9 Phone Viewport
   ======================================== */

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* How far the fixed header pushes content down. Set so the air below the burger
   matches the air above it (2.5rem), which means it also clears the header.
   Defined once, since every page layout offsets against it — recalculate if the
   logo size or the nav padding changes. */
:root {
    --header-offset: 156px;
}

body {
    font-family: 'Jost', 'Futura', sans-serif;
    font-weight: 200;
    line-height: 1.6;
    color: #000;
    background-color: #fff;
}

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

/* Available to screen readers and search engines, but out of the visual design.
   Used for page headings where the layout is carried by imagery alone. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

/* Safari on iOS paints button text in the system accent colour unless told
   otherwise, which turned the services headings blue on a phone. */
button {
    color: inherit;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Google Fonts - EB Garamond (headers) + Jost (body) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Jost:wght@200;300;400&display=swap');

h1, h2, h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    line-height: 1.1;
    text-transform: capitalize;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
}

.nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.25rem 1rem;
    height: auto;
    position: relative;
    z-index: 1002;
}

.nav__link {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.25rem;
    text-transform: lowercase;
    transition: opacity 0.2s ease;
}

.nav__link:hover {
    opacity: 0.5;
}

.nav__link--left {
    flex: 1;
    text-align: left;
}

.nav__link--right {
    flex: 1;
    text-align: right;
}

.nav__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
}

/* The mark stacks STUDIO over TAKTIL, so its height covers two lines of caps —
   it needs roughly double the height of a single-line logo to read at the same size. */
.nav__logo-img {
    height: 48px;
    width: auto;
}

/* Burger Menu Toggle */
.nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1001;
}

.nav__toggle-bar {
    display: block;
    width: 24px;
    height: 1px;
    background-color: #000;
    transition: all 0.3s ease;
}

.nav__toggle.active .nav__toggle-bar:first-child {
    transform: rotate(45deg) translate(2px, 2px);
}

.nav__toggle.active .nav__toggle-bar:last-child {
    transform: rotate(-45deg) translate(2px, -2px);
}

/* Contact Link */
.nav__contact {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.25rem;
    text-transform: lowercase;
    flex: 1;
    text-align: right;
    transition: opacity 0.2s ease;
}

.nav__contact:hover {
    opacity: 0.5;
}

/* Mobile Menu */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1003;
}

.mobile-menu.active {
    max-height: 400px;
}

/* The nav's own bottom padding adds to the space above the first link, so the
   bottom padding is larger to leave the same amount of air below the last one. */
.mobile-menu__list {
    list-style: none;
    padding: 2.5rem 0 3.5rem;
    margin: 0;
    text-align: center;
}

.mobile-menu__list li {
    margin-bottom: 1.25rem;
}

.mobile-menu__list li:last-child {
    margin-bottom: 0;
}

/* Grey by default, black for the page you are on — the same signal the filter
   tabs give at the foot of the projects page. */
.mobile-menu__link {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #999;
    transition: color 0.2s ease;
}

.mobile-menu__link:hover {
    color: #000;
}

.mobile-menu__link--active {
    color: #000;
}

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

.main {
    margin-top: var(--header-offset);
    height: calc(100vh - var(--header-offset));
    overflow: hidden;
}

/* ========================================
   FULLSCREEN SLIDESHOW
   ======================================== */

.header--transparent {
    background-color: transparent;
}

.header--transparent .nav__logo-img {
    filter: brightness(0) invert(1);
}

.header--transparent .nav__toggle-bar {
    background-color: #fff;
}

.header--transparent .mobile-menu {
    background-color: transparent;
}

.header--transparent .mobile-menu__link {
    color: #fff;
}

.slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Scrolling, swiping, clicking or pressing a key lifts the landing page away
   before the projects page loads, rather than cutting straight to it. */
body.is-leaving .slideshow {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .slideshow {
        transition: none;
    }
}

.slideshow__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.slideshow__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slideshow__slide--active {
    opacity: 1;
}

.slideshow__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Several of the photographs are pale, and white type alone disappears into
   them. This darkens only the centre, where the mark and tagline sit. */
.slideshow__slides::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 70% at 50% 50%,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.34) 40%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0) 100%);
}

/* Studio mark and tagline, centred over the slideshow. Laid out as a centred
   flex column across the whole viewport rather than a fixed-size box nudged to
   the middle, so the text can never run off the bottom on a short window. */
.slideshow__intro {
    /* Gap between the mark and the text, scaled to the height of the window */
    --mark-gap: clamp(1.75rem, 10vh, 6.75rem);

    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    pointer-events: none;

    /* Centring the taller block would lift the mark; shifting back by half the
       added gap leaves the mark exactly where it sits and moves only the text. */
    transform: translateY(calc((var(--mark-gap) - 1.75rem) / 2));
}

.slideshow__mark {
    display: block;
    width: clamp(120px, 18vw, 220px);
    height: auto;
    margin: 0 0 var(--mark-gap);
    filter: brightness(0) invert(1);
}

/* A tight shadow. A wide, soft one smudges together across a line of text and
   reads as a dark box behind it — the scrim does the heavy lifting instead. */
.slideshow__tagline,
.slideshow__sub {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.slideshow__tagline {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(1.25rem, 2.8vw, 1.875rem);
    font-weight: 400;
    line-height: 1.3;
    max-width: 22ch;
    margin: 0 0 1rem;
}

.slideshow__sub {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    font-weight: 300;
    line-height: 1.7;
    max-width: 48ch;
    margin: 0;
}

/* On a phone the sentence ran to three lines. Two needs about 62 characters a
   line, which no fixed size manages across both 320px and 430px handsets — so
   here the type follows the width of the screen and the 48ch measure comes off,
   since at 10px it would be narrower than the screen and force a third line. */
@media (max-width: 767px) {
    .slideshow__intro {
        padding: 1rem;
    }

    .slideshow__sub {
        font-size: clamp(10px, 3vw, 13px);
        max-width: none;
    }
}

.slideshow__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.container {
    width: 100%;
    padding: 0 1.25rem;
    height: 100%;
}

/* ========================================
   MASONRY GRID - TWO COLUMNS
   ======================================== */

.masonry-grid {
    display: flex;
    gap: 1rem;
    padding-top: 1.25rem;
    height: 100%;
}

.masonry-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

.masonry-column::-webkit-scrollbar {
    width: 0;
    display: none;
}

.masonry-column {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.masonry-column:nth-child(1) {
    gap: 18rem;
}

.masonry-column:nth-child(2) {
    gap: 12rem;
}

/* ========================================
   PROJECT CARD
   ======================================== */

.project-card {
    margin-bottom: 0;
}

.project-card__link {
    display: block;
    transition: opacity 0.3s ease;
}

.project-card__link:hover {
    opacity: 0.7;
}

.project-card__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.project-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.project-card__image--secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card:hover .project-card__image--secondary {
    opacity: 1;
}

/* The two masonry columns are about 160px wide on a phone, so anything larger
   than this cuts long titles like "Charlottehaven" off mid-word. Desktop keeps
   its own size in the 768px breakpoint below. */
.project-card__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
    text-transform: none;
    line-height: 1.1;
}

.project-card__tags {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.625rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 0;
    text-transform: uppercase;
}

.project-card__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.625rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Hidden state for filtering */
.project-card--hidden {
    display: none;
}

/* ========================================
   TABLET & DESKTOP (768px+)
   ======================================== */

@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .masonry-grid {
        gap: 2rem;
        padding-top: 2rem;
    }

    .masonry-column {
        gap: 5rem;
    }

    .project-card__image-wrapper {
        margin-bottom: 1rem;
    }

    .project-card__title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .project-card__text {
        font-size: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 3rem;
    }

    .masonry-grid {
        gap: 3rem;
        padding-top: 3rem;
    }

    .masonry-column {
        gap: 6rem;
    }
}

/* ========================================
   STUDIO & SERVICES PAGE
   ======================================== */

.studio-page,
.services-page {
    padding: 3rem 0;
}

/* ========================================
   NEW STUDIO PAGE LAYOUT
   ======================================== */

.studio-page--new {
    padding: 2rem 0;
}

/* Studio page with masonry columns */
.main--studio {
    margin-top: var(--header-offset);
    height: calc(100vh - var(--header-offset));
    overflow-y: auto;
    overflow-x: hidden;
}

.main--studio .masonry-grid {
    height: auto;
}

.main--studio .masonry-column {
    overflow: visible;
    height: auto;
}

/* The columns grow past one viewport here, so the container must grow with them —
   otherwise the footer that follows it lands a screen down, inside the content. */
.main--studio > .container {
    height: auto;
}

.main--studio .footer {
    margin-top: 4rem;
}

.studio-block {
    margin-bottom: 3rem;
}

.studio-block img {
    width: 100%;
    height: auto;
}

.studio-section {
    margin-bottom: 3rem;
}

.studio-section__row {
    display: flex;
    gap: 2rem;
}

.studio-section__title {
    flex: 0 0 40%;
}

.studio-section__content {
    flex: 1;
}

.studio-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.1;
    text-transform: capitalize;
}

.studio-text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: justify;
}

.studio-text:last-child {
    margin-bottom: 0;
}

.studio-photo {
    margin-bottom: 3rem;
}

.studio-photo img {
    width: 100%;
    height: auto;
}

/* Team Section */
.studio-team {
    margin-bottom: 2rem;
}

.studio-team--columns {
    display: flex;
    gap: 2rem;
}

.studio-team__column {
    flex: 1;
}

.studio-team__image {
    margin-bottom: 1rem;
}

.studio-team__image img {
    width: 100%;
    height: auto;
}

.studio-team__name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
}

/* Role and education, set quieter than the bio so the name still leads */
.studio-team__role {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.6875rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #666;
    margin-bottom: 1rem;
}

/* Mobile adjustments for new studio layout */
@media (max-width: 767px) {
    .studio-section__row {
        flex-direction: column;
        gap: 1.5rem;
    }

    .studio-section__title {
        flex: none;
    }

    .studio-title {
        font-size: 2rem;
    }

    .studio-team--columns {
        flex-direction: column;
        gap: 3rem;
    }

    .studio-team__column {
        flex: none;
    }

    .studio-team__name {
        font-size: 1.25rem;
    }
}

.page-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2rem;
    margin-bottom: 2rem;
    text-transform: capitalize;
}

.studio-intro {
    max-width: 800px;
    margin-bottom: 4rem;
}

.studio-intro__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.team-section {
    margin-bottom: 4rem;
}

.section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-transform: capitalize;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }
}

.service-item__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.service-item__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 3rem;
    }
}

.team-member__image-wrapper {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    margin-bottom: 1rem;
}

.team-member__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member__name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.team-member__title {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 1rem;
}

.team-member__bio {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    line-height: 1.8;
}

.team-member__contact {
    margin-top: 1rem;
}

.team-member__contact a {
    transition: opacity 0.2s ease;
}

.team-member__contact a:hover {
    opacity: 0.6;
}

/* Project Detail Page. The top padding is set so the hero starts the same 2.5rem
   below the burger as the wordmark sits above it — the header offset already
   covers the header itself. */
.project-detail {
    padding: 1.25rem 0 4rem;
}

.project-header {
    margin-bottom: 1rem;
}

.project-description {
    margin-top: 3rem;
}

.project-description p {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.project-description p:last-child {
    margin-bottom: 0;
}

.project-nav {
    margin-top: 3rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.project-nav__link {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
}

.project-nav__link:hover {
    opacity: 0.5;
}

.project-header__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.project-header__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.project-header__meta-item {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: capitalize;
}

.project-header__meta-label {
    font-weight: 300;
}

/* ========================================
   EDITORIAL GALLERY
   ======================================== */

/* Lobby hero */
.lobby-hero img {
    width: 100%;
    display: block;
}

/* Titel + meta under hero */
.lobby-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    padding: 3rem 0 4rem;
}

.lobby-content__text .project-description {
    margin-top: 0;
}

/* Lobby citat under billede */
.lobby-quote {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
    padding: 6rem;
    width: 130%;
}

/* Studio side: citat aligner med billede, ingen ekstra indryk */
.masonry-column .lobby-quote {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 2rem;
    margin-top: 10rem;
    width: 100%;
}

/* Billedtekster i galleriet */
.gallery-caption {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.7;
    color: #555;
    margin-top: 0.75rem;
}

.gallery-row--inset .gallery-caption {
    text-align: center;
    padding: 0 10%;
}

.project-gallery--editorial {
    margin-top: 0;
}

/* Each row is a visual section */
.gallery-row {
    margin-bottom: 7rem;
}

.gallery-row img {
    width: 100%;
    display: block;
}

/* Full-width row */
.gallery-row--full img {
    width: 100%;
}

/* Inset row: centered with air on both sides */
.gallery-row--inset {
    padding: 0 33%;
}

/* Closing full-bleed row: a section drawing reads as a second hero at the foot
   of the page. Edge to edge, with air above it rather than below. */
.gallery-row--section-hero {
    padding: 0;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.gallery-row--section-hero img {
    width: 100%;
    display: block;
}

/* Full-width secondary hero row */
.gallery-row--full-hero {
    padding: 0 20%;
}

.gallery-row--full-hero img {
    width: 100%;
    display: block;
}

/* Skitse centreret på fuld skærmbredde */
.gallery-row--sketch-centered {
    display: flex;
    justify-content: center;
    margin-bottom: 6rem;
}

.gallery-row--sketch-centered img {
    width: 60%;
}

/* Sub-image under a gallery item */
.gallery-item__sub-image-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.gallery-item__sub-image {
    width: 60%;
}

/* Two-column rows using 3-track grid (left, gap, right) */
.gallery-row--left-sm {
    display: grid;
    grid-template-columns: 5fr 3fr 7fr;
    align-items: start;
}

.gallery-row--left-lg {
    display: grid;
    grid-template-columns: 7fr 3fr 5fr;
    align-items: start;
}

/* Place first image in col 1, second in col 3 (skipping the gap col) */
.gallery-row--left-sm .gallery-item:first-child,
.gallery-row--left-lg .gallery-item:first-child {
    grid-column: 1;
}

.gallery-row--left-sm .gallery-item:last-child,
.gallery-row--left-lg .gallery-item:last-child {
    grid-column: 3;
}

/* Vertical offset creates the staggered editorial feel */
.gallery-item--offset {
    margin-top: 10rem;
}

.gallery-item--offset-sm {
    margin-top: 5rem;
}

.gallery-item--half img {
    width: 50%;
}

@media (max-width: 768px) {
    /* Side by side, the meta column claims its min-content width and squeezes the
       description down to about 100px, cutting words off at the screen edge. */
    .lobby-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2rem 0 3rem;
    }

    /* The quote is deliberately wider than its column on desktop; on a phone that
       overhang plus 6rem of padding runs straight off the screen. The side padding
       matches .container so the text lines up with everything else — the studio
       page keeps its own 0 via the more specific .masonry-column rule. */
    .lobby-quote {
        width: 100%;
        padding: 3rem 1.25rem;
    }

    .gallery-row--left-sm,
    .gallery-row--left-lg {
        display: block;
    }
    .gallery-row--inset {
        padding: 0;
    }
    .gallery-item--offset,
    .gallery-item--offset-sm {
        margin-top: 2rem;
    }
    .gallery-row {
        margin-bottom: 3rem;
    }
}

/* ========================================
   CAROUSEL
   ======================================== */

.carousel {
    position: relative;
    width: 100%;
    margin: 4rem 0;
}

.carousel__slide {
    display: none;
    width: 100%;
}

.carousel__slide--active {
    display: block;
    animation: carouselFade 0.4s ease;
}

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

.carousel__slide img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1.25rem 0;
}

.carousel__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    padding: 0;
    letter-spacing: 0.05em;
}

.carousel__btn:hover {
    opacity: 0.5;
}

.carousel__counter {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* ========================================
   PROJECT SPLIT LAYOUT (carousel left, text right)
   ======================================== */

/* ========================================
   HEALTHCLUB – STACKED LAYOUT
   ======================================== */

/* Titel | Karoussel (centreret) | Tom plads */
.healthclub-top {
    display: flex;
    align-items: flex-start;
    padding-top: 3rem;
}

.healthclub-top__title {
    flex: 1;
    padding-right: 2rem;
}

.healthclub-top__text {
    flex: 1;
    padding-left: 2rem;
}

.healthclub-top__text .project-description {
    margin-top: 0;
}

/* Karoussel wrapper – fast bredde, centreret */
.healthclub-carousel {
    flex: 0 0 45%;
    transition: flex-basis 0.3s ease;
}

/* Landskabsbillede: bredere */
.healthclub-carousel--landscape {
    flex-basis: 65%;
}

.healthclub-carousel .carousel {
    width: 100%;
    margin: 0;
}

/* Fast aspect-ratio baseret på portrætbilleder (1122×1702) – ingen layout-hop */
.healthclub-carousel .carousel__track {
    position: relative;
    aspect-ratio: 1122 / 1702;
    cursor: none;
}

/* Slides stablede oven på hinanden – ingen overgang */
.healthclub-carousel .carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.healthclub-carousel .carousel__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.healthclub-carousel .carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
}

/* Landskabsbillede: justér mod toppen */
.healthclub-carousel .carousel__slide--is-landscape img {
    object-position: left top;
}

.healthclub-carousel .carousel__track {
    cursor: none;
    position: relative;
}

.carousel-cursor {
    position: absolute;
    pointer-events: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
    user-select: none;
}

.healthclub-carousel .carousel__controls {
    /* stylet af generel carousel CSS */
}

/* Meta + brødtekst under karousellen – to kolonner */
.healthclub-top__title .project-header__meta {
    margin-top: 1.5rem;
}

.healthclub-content {
    padding: 3rem 0 4rem;
}

.healthclub-content__text {
    max-width: 66%;
}

@media (max-width: 768px) {
    .healthclub-carousel {
        height: 60vw;
    }
    .healthclub-content {
        padding: 2rem 0 3rem;
    }
    .healthclub-content__text {
        max-width: 100%;
    }
}

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

.footer {
    background-color: #000;
    color: #fff;
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}

.footer__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer__content {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    line-height: 1.8;
}

.footer__text a {
    transition: opacity 0.2s ease;
}

.footer__text a:hover {
    opacity: 0.7;
}

.footer__bottom {
    border-top: 1px solid #333;
    padding-top: 1.5rem;
    text-align: center;
}

.footer__copyright {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.625rem;
    opacity: 0.6;
}

.footer__link {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    transition: opacity 0.2s ease;
}

.footer__link:hover {
    opacity: 0.7;
}

/* ========================================
   SERVICES PAGE
   ======================================== */

.main--scrollable {
    overflow-y: auto;
    height: auto;
    min-height: calc(100vh - var(--header-offset));
}

.services-page {
    padding: 3rem 0;
}

/* Stacked on phones — at two columns the headings cannot shrink below their
   min-content width, so the right column was pushed off the screen edge. */
.services-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: stretch;
}

.services-layout__intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-intro__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    line-height: 1.8;
}

.services-intro__cta {
    margin-top: auto;
    font-family: 'EB Garamond', Georgia, serif;
    /* Sized so the question fits on one line in this column, which is 504px
       wide. Dropping a step from 1.75rem buys the wordmark room to grow. */
    font-size: 1.625rem;
    line-height: 1.3;
}

/* The question and the invitation are set as two blocks with air between them */
.services-intro__cta-line + .services-intro__cta-line {
    margin-top: 1.5rem;
}

/* Holds the break after "could". Dropped on narrow screens, where forcing it
   would leave a short, ragged first line. */
@media (max-width: 900px) {
    .services-intro__break {
        display: none;
    }
}

/* The whole block is the link through to the contact page. It fades on hover,
   like the other links on the site. */
.services-intro__cta {
    display: block;
    transition: opacity 0.2s ease;
}

.services-intro__cta:hover,
.services-intro__cta:focus-visible {
    opacity: 0.6;
}

/* The studio wordmark stands in for the name inside the sentence. Sized to the
   cap height of the surrounding Garamond so it sits on the line, not above it. */
.services-intro__nowrap {
    white-space: nowrap;
}

.services-intro__logo {
    /* Images are display:block site-wide, which would break the sentence across
       three lines. This one has to sit in the run of text. */
    display: inline-block;
    height: 0.72em;
    width: auto;
    vertical-align: baseline;
    margin: 0 0.1em 0 0.06em;
}

.services-offer__label {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    font-style: italic;
    margin-bottom: 2rem;
}

.services-offer__items {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.services-offer__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

.services-offer__desc {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #333;
}

.services-categories {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-bottom: 5rem;
}

.service-category {
    border-top: 1px solid #000;
    padding-top: 1.5rem;
}

.service-category__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.service-category__content {
    max-width: 600px;
}

.service-category__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.service-category__text:last-child {
    margin-bottom: 0;
}

/* Services CTA */
.services-cta {
    border-top: 1px solid #000;
    padding-top: 2rem;
    margin-top: 4rem;
}

.services-cta__text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.services-cta__link {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid #000;
    transition: all 0.2s ease;
}

.services-cta__link:hover {
    background-color: #000;
    color: #fff;
}

@media (min-width: 768px) {
    .services-page {
        padding: 4rem 0;
    }

    .services-layout {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        margin-bottom: 6rem;
    }

    .services-intro {
        margin-bottom: 5rem;
    }

    .services-intro__text {
        font-size: 1rem;
    }

    .services-categories {
        gap: 5rem;
    }

    .service-category__title {
        font-size: 2.5rem;
    }

    .service-category__text {
        font-size: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .services-page {
        padding: 5rem 0;
    }

    .service-category__title {
        font-size: 2.5rem;
        margin-bottom: 0;
    }

    .service-category__content {
        max-width: none;
    }
}

/* ========================================
   SERVICE ACCORDION
   ======================================== */

.service-accordion {
    border-top: 1px solid #000;
}

.service-accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.service-accordion__header:hover {
    opacity: 0.6;
}

.service-accordion__header .service-category__title {
    margin-bottom: 0;
}

.service-accordion__icon {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 1.5rem;
    font-weight: 200;
    transition: transform 0.3s ease;
}

.service-accordion.active .service-accordion__icon {
    transform: rotate(45deg);
}

.service-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0;
}

.service-accordion.active .service-accordion__content {
    max-height: 500px;
    padding-bottom: 2rem;
}

.service-accordion .service-category__text {
    max-width: 600px;
}

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

/* Header with filters */
.header--with-filters {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
}

.main--with-filters {
    margin-top: var(--header-offset);
    height: calc(100vh - var(--header-offset) - 60px);
    overflow: hidden;
    padding-bottom: 0;
}

/* Projects Filter Grid */
.projects-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    padding: 1rem 0 3rem;
}

.projects-filter-grid .project-card__title {
    font-size: 1.5rem;
}

/* Filter Tags */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 1.25rem 1rem;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 1.5rem;
}

.filter-tags--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
    padding: 1rem 0 1.5rem;
    max-width: 400px;
}

.filter-tag {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: opacity 0.2s ease;
    color: #000;
    text-align: center;
}

.filter-tag:hover {
    opacity: 0.5;
}

.filter-tag--active {
    color: #000;
}

.filter-close {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.filter-close__line {
    display: block;
    width: 20px;
    height: 1px;
    background-color: #000;
    transition: opacity 0.2s ease;
}

.filter-close__line:first-child {
    transform: rotate(45deg) translateY(0.5px);
}

.filter-close__line:last-child {
    transform: rotate(-45deg) translateY(-0.5px);
}

.filter-close:hover .filter-close__line {
    opacity: 0.5;
}

/* Bottom Filter Tabs */
.filter-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem;
    gap: 1.5rem;
    z-index: 1000;
}

.filter-tabs__btn {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    color: #999;
    transition: color 0.2s ease;
}

.filter-tabs__btn:hover {
    color: #000;
}

.filter-tabs__btn--active {
    color: #000;
}

/* Each column's scroll area fills its half of the window, so a scroll anywhere
   on that side moves that column — not only when the cursor is over an image.
   The inset that .container used to provide is recreated inside each column, so
   the cards stay exactly where they were. Desktop only: on a phone the columns
   already reach almost to the edges. */
@media (min-width: 1024px) {
    .main--with-filters {
        margin-top: 0;
        height: calc(100vh - 60px);
    }

    .main--with-filters > .container {
        max-width: none;
        padding: 0;
    }

    .main--with-filters .masonry-grid {
        gap: 0;
        padding-top: 0;
    }

    .main--with-filters .masonry-column {
        padding-top: calc(var(--header-offset) + 3rem);
    }

    .main--with-filters .masonry-column:nth-child(1) {
        padding-left: calc(max(0px, (100vw - 1200px) / 2) + 3rem);
        padding-right: 1.5rem;
    }

    .main--with-filters .masonry-column:nth-child(2) {
        padding-left: 1.5rem;
        padding-right: calc(max(0px, (100vw - 1200px) / 2) + 3rem);
    }

    /* The header bar spans the full width and would otherwise swallow scrolls
       over the empty space beside the logo. Only its controls stay clickable. */
    .header--with-filters {
        pointer-events: none;
    }

    .header--with-filters .nav__logo,
    .header--with-filters .nav__toggle,
    .header--with-filters .mobile-menu {
        pointer-events: auto;
    }
}

/* The seven tabs are wider than a phone screen, and centred overflow put the
   first and last tab beyond both edges with no way to reach them. On small
   screens they wrap onto a second row instead. */
@media (max-width: 768px) {
    .filter-tabs {
        flex-wrap: wrap;
        gap: 0.5rem 1.25rem;
    }

    /* The 18rem/12rem stagger is editorial breathing room on a wide screen; on a
       phone it leaves most of the column empty. Scaled down, same 3:2 rhythm. */
    .masonry-column:nth-child(1) {
        gap: 6rem;
    }

    .masonry-column:nth-child(2) {
        gap: 4rem;
    }

    /* Two rows make the fixed bar taller than the 60px the layout reserves for
       it, which would leave the bottom of the grid hidden behind it. */
    .main--with-filters {
        height: calc(100vh - var(--header-offset) - 80px);
    }
}

/* Projects Grid */
.projects-page {
    padding: 1rem 0 3rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
}

/* Project Item */
.project-item {
    display: block;
}

.project-item__link {
    display: block;
    transition: opacity 0.3s ease;
}

.project-item__link:hover {
    opacity: 0.7;
}

.project-item__image-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.project-item__image {
    width: 100%;
    height: auto;
    display: block;
}

.project-item__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.project-item__tags {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.625rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Hidden state for filtering */
.project-item--hidden {
    display: none;
}

@media (min-width: 768px) {
    .filter-tags {
        gap: 0.5rem 2rem;
        padding: 1.5rem 2rem 2rem;
    }

    .filter-tag {
        font-size: 0.8125rem;
    }

    .projects-page {
        padding: 2rem 0 4rem;
    }

    .projects-grid {
        gap: 2.5rem 2rem;
    }

    .project-item__title {
        font-size: 1.75rem;
    }

    .project-item__tags {
        font-size: 0.75rem;
    }
}

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

.contact-page {
    padding: 3rem 0 5rem;
}

.contact-intro {
    max-width: 34rem;
    margin-bottom: 3.5rem;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.875rem;
    line-height: 1.8;
}

.contact-form {
    max-width: 34rem;
    margin-bottom: 5rem;
}

.form-group {
    margin-bottom: 2rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: #333;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.65rem 0;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background-color: transparent;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.9375rem;
    font-weight: 200;
    color: #000;
    transition: border-color 0.25s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-bottom-color: #000;
    border-bottom-width: 2px;
    padding-bottom: calc(0.65rem - 1px);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-submit:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

.form-textarea {
    min-height: 8rem;
    resize: vertical;
}

.form-textarea::placeholder {
    color: #999;
}

.form-submit {
    padding: 0.85rem 2.5rem;
    border: 1px solid #000;
    background-color: transparent;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: #000;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.form-submit:hover {
    background-color: #000;
    color: #fff;
}

.form-submit:disabled {
    opacity: 0.45;
    cursor: default;
}

.form-submit:disabled:hover {
    background-color: transparent;
    color: #000;
}

.form-status {
    margin-top: 1.25rem;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.form-status:empty {
    margin-top: 0;
}

.form-status--success {
    color: #1a1a1a;
    border-left: 2px solid #000;
    padding-left: 0.85rem;
}

.form-status--error {
    color: #8a2f2f;
    border-left: 2px solid #8a2f2f;
    padding-left: 0.85rem;
}

.form-note {
    margin-top: 1rem;
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.75rem;
    color: #666;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    border-top: 1px solid #000;
    padding-top: 2.5rem;
}

.contact-info__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: lowercase;
    margin-bottom: 0.75rem;
}

.contact-info__text {
    font-family: 'Jost', 'Futura', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: #333;
}

.contact-info__text a {
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease;
}

.contact-info__text a:hover {
    border-bottom-color: #000;
}

@media (min-width: 768px) {
    .contact-page {
        padding: 5rem 0 7rem;
    }

    .contact-info {
        flex-direction: row;
        gap: 5rem;
    }

    .contact-info__section {
        flex: 1;
    }
}