/* ── Page-specific styles ────────────────────────────────────────────────────── */


/* ── Entry page ─────────────────────────────────────────────────────────────── */

.entry-page {
    position:   relative;
    z-index:    1;
    min-height: calc(100vh - var(--header-height));
    display:    flex;
    align-items: center;
}

/* Hover media layer — fixed, covers the full viewport */
.entry-media {
    position:       fixed;
    inset:          0;
    width:          100%;   /* belt-and-suspenders alongside inset:0 */
    height:         100%;
    pointer-events: none;
    z-index:        0;
}

.entry-media__item {
    position:   absolute;
    inset:      0;
    width:      100%;       /* explicit alongside inset:0 for max browser compat */
    height:     100%;
    opacity:    0;
    transition: opacity 0.65s ease;
}

.entry-media__item.is-active {
    opacity: 1;
}

/* Override base.css `img, video { max-width: 100% }` which can contain the
   video at its natural aspect ratio on non-16:9 viewports instead of letting
   object-fit:cover crop it to fill. */
.entry-media video {
    width:           100%;
    height:          100%;
    max-width:       none;
    max-height:      none;
    object-fit:      cover;
    object-position: center;
}

/* Bunny iframe wrapper — clips the oversized iframe */
.entry-media__item--bunny {
    overflow: hidden;
}

/* Full-cover iframe technique: iframes ignore object-fit, so the iframe is
   sized to an exact 16:9 box that exceeds the viewport in both axes, then
   centred. Using vw/vh (true viewport units) avoids any ambiguity from the
   parent-percentage chain at unusual screen ratios.
   max(100vw, 177.78vh) = the 16:9 width that covers the full viewport height.
   max(100vh, 56.25vw)  = the 16:9 height that covers the full viewport width. */
.entry-media__item--bunny iframe {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          max(100vw, 177.78vh);
    height:         max(100vh, 56.25vw);
    transform:      translate(-50%, -50%);
    pointer-events: none;
    border:         none;
}

.entry-media__item--image {
    background-size:     cover;
    background-position: center;
}

/* Section navigation */
.entry-nav {
    position: relative;
    z-index:  2;
    width:    100%;
}

/* Inner container: offset from the 24-column header alignment.
   padding-left at 2× container-pad = one 12-col column inset,
   creating a distinct cinematic composition layer vs header/footer. */
.entry-nav > .container {
    display:         flex;
    flex-direction:  column;
    gap:             clamp(16px, 3vw, 20px);
    padding-left:    calc(var(--container-pad) * 2);
}

.entry-nav__item {
    display:        block;
    font-weight:    var(--fw-bold);
    font-size:      clamp(48px, 5.5vw, 80px);
    letter-spacing: var(--letter-spacing);
    line-height:    1.0;
    color:          var(--color-primary);
    transition:     opacity 0.3s ease, transform 0.3s ease;
    will-change:    opacity, transform;
    transform:      translateX(0);
}

/* When nav is in hover state: dim all items */
.entry-nav.has-hover .entry-nav__item {
    opacity: 0.18;
}

/* Active item: full opacity + shift right */
.entry-nav.has-hover .entry-nav__item.is-active {
    opacity:   1;
    transform: translateX(20px);
}


/* ── About overlay ──────────────────────────────────────────────────────────── */

/* .entry-about is excluded from the background.css stacking rule via :not(),
   so position: fixed here is not overridden. */
body > .entry-about {
    position:       fixed;
    inset:          0;
    z-index:        200;
    pointer-events: none;
}

.entry-about {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    background:      rgba(0, 0, 0, 0.95);
    opacity:         0;
    transition:      opacity 0.3s ease;
}

.entry-about.is-open {
    opacity:        1;
    pointer-events: auto;
}

.entry-about__inner {
    width:          100%;
    max-width:      840px;
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.entry-about__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--spacing-lg);
}

.entry-about__logo {
    font-weight:    var(--fw-bold);
    font-size:      18px;
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
}

.entry-about__close {
    display:    flex;
    align-items: center;
    color:      var(--color-primary);
    opacity:    var(--opacity-ui);
    transition: opacity 0.2s ease;
    padding:    4px;
}

.entry-about__close:hover {
    opacity: 1;
}

.entry-about__body {
    font-size:      clamp(18px, 2vw, 24px);
    font-weight:    var(--fw-light);
    letter-spacing: var(--letter-spacing);
    line-height:    1.55;
}

.entry-about__body p {
    color:   var(--color-primary);
    opacity: var(--opacity-body);
}

/* Prevent body scroll while overlay is open */
body.has-overlay {
    overflow: hidden;
}


/* ── Projects page ───────────────────────────────────────────────────────────── */

/* Hero — true full-bleed: negative margins cancel the 2× content container
   padding on both sides. Block width auto-computes to exact viewport width.
   No 100vw needed — avoids scrollbar-width discrepancies cross-browser.
   Replace .projects-hero__video with a Bunny.net iframe/HLS source when ready. */
.projects-hero {
    width:        100vw;
    margin-left:  calc(var(--container-pad) * -2);
    aspect-ratio: 16 / 5;
    max-height:   560px;
    background:   #0a0a0a;
    overflow:     hidden;
    position:     relative;
}

/* Future-proof: video / iframe / img inside the hero fill it */
.projects-hero iframe,
.projects-hero video,
.projects-hero img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    border:     none;
}

/* Projects section — sits below the hero */
.projects-section {
    padding-top:    var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

/* Header row: "Projects" H1 on the left, controls on the right */
.projects-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--spacing-md);
    margin-bottom:   var(--spacing-lg);
    flex-wrap:       wrap;
}

.projects-header__title {
    flex-shrink: 0;
}

/* Right side: filters + toggle grouped together */
.projects-controls {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-md);
    flex-wrap:   wrap;
}


/* ── Category filters ────────────────────────────────────────────────────────── */

.project-filters {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-sm);
    flex-wrap:   wrap;
}

.project-filter {
    font-size:      var(--fs-nav);
    font-weight:    400;
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.project-filter:hover,
.project-filter.is-active {
    opacity: 1;
}


/* ── View toggle ─────────────────────────────────────────────────────────────── */

.view-toggle {
    display:     flex;
    align-items: center;
    gap:         8px;
    white-space: nowrap;
}

.view-toggle__btn {
    font-size:      var(--fs-nav);
    font-weight:    400;
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.view-toggle__btn.is-active {
    opacity: 1;
}

/* Sliding track + knob */
.view-toggle__track {
    width:        28px;
    height:       16px;
    border-radius: 999px;
    background:   rgba(240, 242, 228, 0.2);
    position:     relative;
    cursor:       pointer;
    flex-shrink:  0;
}

.view-toggle__knob {
    width:            10px;
    height:           10px;
    border-radius:    50%;
    background:       var(--color-primary);
    position:         absolute;
    top:              3px;
    left:             3px;
    transition:       transform 0.25s ease;
}

/* When list view is active, knob slides right */
.view-toggle--list .view-toggle__knob {
    transform: translateX(12px);
}


/* ── Project grid ────────────────────────────────────────────────────────────── */

.projects-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--spacing-md);
}

.projects-grid.is-hidden {
    display: none;
}

.project-card.is-hidden {
    display: none;
}

.project-card__link {
    display: block;
    color:   var(--color-primary);
}

/* Thumbnail area with fixed aspect ratio */
.project-card__media {
    position:      relative;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    background:    rgba(255, 255, 255, 0.04);
    margin-bottom: 14px;
    border-radius: 5px;
}

.project-card__image {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    transition:  transform 0.55s ease;
    will-change: transform;
}

.project-card__link:hover .project-card__image {
    transform: scale(1.04);
}

/* Hover video overlays the thumbnail — fades in on hover */
.project-card__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0;
    transition: opacity 0.4s ease;
}

.project-card__link:hover .project-card__video {
    opacity: 1;
}

/* Video-as-thumbnail: visible by default, stays visible on hover */
.project-card--video-thumb .project-card__video {
    opacity: 1;
}

.project-card__no-thumb {
    position:   absolute;
    inset:      0;
    background: rgba(255, 255, 255, 0.04);
}

/* Title + pill below the image */
.project-card__footer {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
}

.project-card__title {
    font-size:      22px;
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    color:          var(--color-primary);
    line-height:    1.3;
}


/* ── Project list ────────────────────────────────────────────────────────────── */

.projects-list.is-hidden {
    display: none;
}

.projects-empty {
    font-size: var(--fs-body);
    opacity:   var(--opacity-ui);
}

/* Header row — white pill with dark text */
.project-list__header {
    display:               grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    align-items:           center;
    padding:               8px 24px;
    background:            var(--color-primary);
    color:                 var(--color-dark);
    border-radius:         999px;
    margin-bottom:         var(--spacing-md);
    font-size:             12px;
    font-weight:           var(--fw-semibold);
    letter-spacing:        0.04em;
    text-transform:        uppercase;
}

/* Data rows */
.project-list-row {
    display:               grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    align-items:           center;
    padding:               24px 0;
    border-bottom:         1px solid rgba(240, 242, 228, 0.07);
    color:                 var(--color-primary);
    text-decoration:       none;
    transition:            opacity 0.2s ease;
}

.project-list-row.is-hidden {
    display: none;
}

.project-list-row__col--project {
    font-size:      18px;
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.project-list-row__col--director,
.project-list-row__col--time,
.project-list-row__col--type {
    font-size:      14px;
    font-weight:    var(--fw-regular);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.project-list-row:hover .project-list-row__col--project,
.project-list-row:hover .project-list-row__col--director,
.project-list-row:hover .project-list-row__col--time,
.project-list-row:hover .project-list-row__col--type {
    opacity: 1;
}


/* ── Single project page ─────────────────────────────────────────────────────── */

.single-project {
    padding-top:    var(--spacing-md);
    padding-bottom: var(--spacing-xl);
}

/* Back / Next navigation row — sits above the video */
.single-project__nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   var(--spacing-sm);
}

.single-project__back,
.single-project__next {
    font-size:      12px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.single-project__back:hover,
.single-project__next:hover {
    opacity: 1;
}

/* Main video area — full width of the 12-col content container, cinematic 16:9 */
.single-project__video {
    position:      relative;
    width:         100%;
    aspect-ratio:  16 / 9;
    background:    #0a0a0a;
    overflow:      hidden;
}

.single-project__video iframe,
.single-project__video video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    border:     none;
    object-fit: cover;
}


/* ── Custom video player ─────────────────────────────────────────────────────── */

/* Fills the .single-project__video container on desktop */
.video-player {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}

/* Frame: holds only the <video> + credits overlay.
   Fills the player on desktop; becomes a 16:9 block on mobile. */
.video-player__frame {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

/* The <video> element fills the frame */
.video-player__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    cursor:     pointer;
    max-width:  none;
    max-height: none;
}

/* Controls wrapper: sits on top of the frame via z-index on desktop,
   becomes a panel below the frame on mobile (see responsive.css). */
.video-player__controls-wrapper {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        60px 32px 0;
    background:     linear-gradient(to top, rgba(0, 0, 0, 0.60) 0%, transparent 100%);
    z-index:        2;
    pointer-events: none;
}

/* Three-column controls row */
.video-player__controls {
    display:     grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin-bottom: 10px;
    pointer-events: auto;
}

.video-player__col {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.video-player__col--center {
    justify-content: center;
}

.video-player__col--right {
    justify-content: flex-end;
}

/* Control buttons */
.video-player__btn {
    font-size:      13px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        0.35;
    transition:     opacity 0.2s ease;
    line-height:    1;
    padding:        4px 0;
}

.video-player__btn:hover {
    opacity: 1;
}

.video-player__btn.is-active {
    opacity: 1;
}

/* The "/" separator between label pairs */
.video-player__sep {
    font-size:   13px;
    font-weight: var(--fw-light);
    color:       var(--color-primary);
    opacity:     0.2;
    line-height: 1;
    user-select: none;
}

/* Bar row: full-width container for the sliding timer */
.video-player__bar {
    padding-bottom: 16px;
    pointer-events: auto;
}

/* Invisible track — full width, sized to hold the timer text */
.video-player__progress {
    position:       relative;
    width:          100%;
    height:         20px;
    cursor:         pointer; /* still seekable via click */
    pointer-events: auto;
}

/* Moving timer: JS sets left: Xpx to slide it left → right */
.video-player__time {
    position:      absolute;
    top:           50%;
    left:          0;
    transform:     translateY(-50%);
    font-size:     11px;
    font-weight:   var(--fw-light);
    letter-spacing: 0.06em;
    color:         var(--color-primary);
    opacity:       0.55;
    line-height:   1;
    white-space:   nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* ── Credits overlay ─────────────────────────────────────────────────────────── */

.video-player__credits-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.72);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.3s ease;
}

.video-player__credits-overlay.is-open {
    opacity:        1;
    pointer-events: auto;
}

/* Close × button, top-right of the video */
.video-player__credits-close {
    position:   absolute;
    top:        20px;
    right:      24px;
    font-size:  14px;
    font-weight: var(--fw-regular);
    color:       var(--color-primary);
    opacity:     var(--opacity-ui);
    transition:  opacity 0.2s ease;
    line-height: 1;
    width:       28px;
    height:      28px;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.video-player__credits-close:hover {
    opacity: 1;
}

/* Credits table: two-column, centred in the overlay */
.video-player__credits-table {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.video-player__credit-row {
    display:     flex;
    gap:         28px;
    align-items: baseline;
}

.video-player__credit-label {
    font-size:      11px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        0.45;
    text-align:     right;
    min-width:      110px;
}

.video-player__credit-value {
    font-size:      11px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-primary);
    text-align:     left;
    min-width:      160px;
}

/* Placeholder box when no video is available */
.single-project__video-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    opacity:         var(--opacity-ui);
}

/* Info block: title → category pill → description */
.single-project__info {
    padding-top: var(--spacing-md);
}

.single-project__title {
    font-size:      clamp(34px, 5vw, 58px);
    line-height:    1.05;
    text-transform: uppercase;
    margin-bottom:  var(--spacing-xs);
}

.single-project__category {
    margin-bottom: var(--spacing-md);
}

/* Description constrained to ~half the content width — mirrors the Figma layout */
.single-project__description {
    max-width:   50%;
    font-size:   var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.6;
}


/* ── Development archive page ────────────────────────────────────────────────── */

/* No hero video — add top breathing room that mirrors the contact page rhythm */
.development-page > .container {
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}


/* ── Single Development Project page ─────────────────────────────────────────── */

.single-dev {
    padding-top:    var(--spacing-md);
    padding-bottom: var(--spacing-xl);
}

/* Back / Next navigation row */
.single-dev__nav {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   var(--spacing-md);
}

.single-dev__back,
.single-dev__next {
    font-size:      12px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.2s ease;
}

.single-dev__back:hover,
.single-dev__next:hover {
    opacity: 1;
}

/* Two-column layout: 40% left / 60% right */
.single-dev__content {
    display:               grid;
    grid-template-columns: 5fr 7fr;
    gap:                   var(--spacing-lg);
    align-items:           start;
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.single-dev__left {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-sm);
    position:       sticky;
    top:            calc(var(--header-height) + var(--spacing-sm));
    align-self:     start;
}

/* Thumbnail — cinematic landscape ratio, rounded corners */
.single-dev__image-wrap {
    width:         100%;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    border-radius: 5px;
    background:    rgba(255, 255, 255, 0.04);
}

.single-dev__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Title */
.single-dev__title {
    font-size:      clamp(22px, 3vw, 38px);
    font-weight:    var(--fw-bold);
    line-height:    1.1;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    color:          var(--color-primary);
    margin:         0;
}

/* Metadata: label / value rows */
.single-dev__meta {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin:         0;
}

.single-dev__meta-row {
    display:               grid;
    grid-template-columns: 1fr 1.5fr;
    gap:                   8px;
    align-items:           baseline;
}

.single-dev__meta-label {
    font-size:      11px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
}

.single-dev__meta-value {
    font-size:      11px;
    font-weight:    var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
}

/* ── Right column ────────────────────────────────────────────────────────── */

.single-dev__right {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-md);
}

.single-dev__block--text {
    font-size:   var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.7;
    color:       var(--color-primary);
    opacity:     var(--opacity-body);
}

.single-dev__block--text p {
    margin-bottom: 1em;
}

.single-dev__block--text p:last-child {
    margin-bottom: 0;
}

/* Images fill the column */
.single-dev__block--image {
    width: 100%;
}

.single-dev__block-img {
    width:         100%;
    display:       block;
    border-radius: 5px;
    object-fit:    cover;
}

/* Video and embeds — 16:9 responsive wrapper */
.single-dev__block--embed {
    position:     relative;
    width:        100%;
    aspect-ratio: 16 / 9;
    background:   #0a0a0a;
    border-radius: 5px;
    overflow:     hidden;
}

.single-dev__block--embed iframe,
.single-dev__block-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    border:     none;
    object-fit: cover;
}

.single-dev__empty {
    font-size: var(--fs-body);
    opacity:   var(--opacity-ui);
}


/* ── About page ──────────────────────────────────────────────────────────────── */

.about-page {
    position: relative;
    z-index:  1;
}


/* ── Intro section ───────────────────────────────────────────────────────────── */

.about-intro {
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.about-intro__title {
    font-size:      clamp(56px, 6.5vw, 92px);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--letter-spacing);
    line-height:    1.05;
    color:          var(--color-primary);
    margin-bottom:  var(--spacing-lg);
}

.about-intro__body {
    max-width:   800px;
    font-size:   var(--fs-body);
    font-weight: var(--fw-light);
    line-height: 1.65;
}

/* Override global p { opacity } so we can control bold text separately via color */
.about-intro__body p {
    opacity:       1;
    color:         rgba(240, 242, 228, 0.8);
    margin-bottom: 1.4em;
}

.about-intro__body p:last-child {
    margin-bottom: 0;
}

.about-intro__body strong,
.about-intro__body b {
    color:       var(--color-primary);
    font-weight: var(--fw-semibold);
}


/* ── Services section ────────────────────────────────────────────────────────── */

.about-services {
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Two-column layout: list on the left, image on the right */
.about-services__layout {
    display:               grid;
    grid-template-columns: 55fr 45fr;
    gap:                   var(--spacing-lg);
    align-items:           start;
}

/* Single-column variant when no images are set */
.about-services--no-images .about-services__layout {
    grid-template-columns: 1fr;
}

.about-services__left {
    display:        flex;
    flex-direction: column;
}

.about-services__label {
    align-self:    flex-start;
    margin-bottom: var(--spacing-md);
}

.about-services__list {
    display:        flex;
    flex-direction: column;
}

/* ── Service items ───────────────────────────────────────────────────────────── */

.about-services__item {
    font-size:      clamp(56px, 6.5vw, 92px);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--letter-spacing);
    line-height:    1.1;
    color:          var(--color-primary);
    cursor:         default;
    transition:     opacity 0.3s ease, transform 0.3s ease;
    will-change:    opacity, transform;
}

/* Hover state on the list: dim all items */
.about-services__list.has-hover .about-services__item {
    opacity: 0.18;
}

/* Active item: full opacity + slight shift right */
.about-services__list.has-hover .about-services__item.is-active {
    opacity:   1;
    transform: translateX(20px);
}

/* ── Image panel ─────────────────────────────────────────────────────────────── */

.about-services__images {
    position:  sticky;
    top:       calc(var(--header-height) + var(--spacing-md));
    align-self: start;
}

.about-services__image-wrap {
    position:      relative;
    width:         100%;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    border-radius: 5px;
}

.about-services__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0;
    transition: opacity 0.45s ease;
}

.about-services__image.is-active {
    opacity: 1;
}


/* ── Spaces & Team section ───────────────────────────────────────────────────── */

.about-team {
    padding-top:    var(--spacing-xl);
    padding-bottom: 100px;
}

/* Pill anchored left; intro text floated to centre independently */
.about-team__header {
    position:      relative;
    display:       flex;
    align-items:   center;
    min-height:    36px;
    margin-bottom: var(--spacing-sm);
}

.about-team__intro {
    position:       absolute;
    left:           50%;
    transform:      translateX(-50%);
    white-space:    nowrap;
    text-align:     center;
    font-size:      var(--fs-body);
    font-weight:    var(--fw-light);
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
    opacity:        var(--opacity-body);
    margin:         0;
}

.about-team__title {
    font-size:      clamp(48px, 6.5vw, 96px);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--letter-spacing);
    line-height:    1.0;
    color:          var(--color-primary);
    text-align:     center;
    margin-bottom:  var(--spacing-lg);
}

/* Frame: centred square viewport. JS overrides width + height for exact proportions. */
.about-team__frame {
    max-width:     90%;           /* safety cap — JS sets exact width */
    margin:        0 auto;
    height:        clamp(200px, 75vh, 900px); /* static fallback only — JS sets exact value */
    overflow:      hidden;
    border-radius: 12px;
    position:      relative;
}

.about-team__track {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    will-change:    transform;
}

.about-team__image {
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    display:       block;
    border-radius: 8px;
    flex-shrink:   0;
}


/* ── About page: References ──────────────────────────────────────────────────── */

.about-refs {
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.about-refs__header {
    margin-bottom: var(--spacing-lg);
}

.about-refs__content {
    display:               grid;
    grid-template-columns: 55fr 45fr;
    gap:                   var(--spacing-lg);
    align-items:           center;
    min-height:            60vh;
}

/* Logo display area — centred, logos stacked in the same cell */
.about-refs__logo-area {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
}

.about-refs__logo-grid {
    display:     grid;
    place-items: center;
    width:       100%;
    max-width:   420px;
}

.about-refs__logo {
    grid-area:  1 / 1;           /* all logos stack in the same cell */
    max-width:  70%;
    max-height: 160px;
    object-fit: contain;
    opacity:    0;
    transform:  scale(0.96);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.about-refs__logo.is-active {
    opacity:   1;
    transform: scale(1);
}

/* Client name list */
.about-refs__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
}

.about-refs__item {
    font-size:      clamp(22px, 2.8vw, 48px);
    font-weight:    var(--fw-regular);
    letter-spacing: var(--letter-spacing);
    line-height:    1.1;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        0.3;
    padding:        7px 0;
    cursor:         default;
    transform:      translateX(0);
    transition:     opacity 0.3s ease, transform 0.3s ease;
    user-select:    none;
}

.about-refs__list.has-hover .about-refs__item {
    opacity: 0.12;
}

.about-refs__list.has-hover .about-refs__item.is-active {
    opacity:   1;
    transform: translateX(20px);
}


/* ── Contact page ─────────────────────────────────────────────────────────────── */

/* Full-height centred column — sits between header and footer */
.contact-page {
    position:        relative;
    z-index:         1;
    min-height:      calc(100vh - var(--header-height));
    display:         flex;
    align-items:     center;
}

.contact-page > .container {
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    width:          100%;
}

.contact-section {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             var(--spacing-lg);
}


/* ── Animated title ──────────────────────────────────────────────────────────── */

/* "Say [WORD]" — both parts share the same font size and sit on one line */
.contact-title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.2em;
    /* Prevent layout shifts when the animated word changes */
    white-space:     nowrap;
}

.contact-title__say {
    font-size:      clamp(48px, 6.5vw, 96px);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--letter-spacing);
    /* line-height matches the roller so both baselines stay aligned */
    line-height:    1.2;
    color:          var(--color-primary);
    opacity:        1;
}

/* Roller: clips words that are outside via overflow:hidden.
   CSS grid stacks all words in the same cell so the roller is
   automatically sized to the widest word — no JS measurement needed.
   line-height:1.2 (instead of 1.0) ensures descenders (j, g, p…) are
   not cut off by the overflow boundary. */
.contact-title__roller {
    display:     grid;
    overflow:    hidden;
    line-height: 1.2;
}

.contact-title__word {
    grid-area:      1 / 1; /* all words overlay each other in the same cell */
    font-size:      clamp(48px, 6.5vw, 96px);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--letter-spacing);
    line-height:    1.2;
    color:          var(--color-primary);
    white-space:    nowrap;
    /* Left-align every word so they all start at the same x position.
       Without this, text-align:center from .contact-section cascades here
       and shorter words (Hola, Ciao) visually shift right on each transition. */
    text-align:     left;
    /* GSAP controls translateY for the slot effect */
    will-change:    transform;
}


/* ── Email addresses ─────────────────────────────────────────────────────────── */

.contact-emails {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--spacing-sm);
}

.contact-email {
    display:        block;
    font-size:      clamp(16px, 2vw, 24px);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--letter-spacing);
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.25s ease;
}

.contact-email:hover {
    opacity: 1;
}


/* ── Locations ──────────────────────────────────────────────────────────────── */

.contact-locations {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
}

.contact-location {
    font-size:      clamp(11px, 1vw, 14px);
    font-weight:    var(--fw-regular);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-primary);
    opacity:        var(--opacity-ui);
    transition:     opacity 0.25s ease;
}

a.contact-location:hover {
    opacity: 1;
}