/* ============================================================
   CUSTOM CURSOR — mix-blend-mode difference dot
============================================================ */
@media screen and (min-width: 960px) {
  * { cursor: none !important; }
}

#cursor {
  border-radius: 50%;
  background: #fff;
  height: 1.2rem;
  left: -100px;
  top: -100px;
  margin-left: -0.6rem;
  margin-top: -0.6rem;
  mix-blend-mode: difference;
  pointer-events: none;
  position: fixed;
  transition: width .3s cubic-bezier(.19,1,.22,1),
              height .3s cubic-bezier(.19,1,.22,1),
              margin .3s cubic-bezier(.19,1,.22,1),
              opacity .2s ease;
  width: 1.2rem;
  will-change: left, top;
  z-index: 9999;
}

#cursor.is-hovering {
  width: 5rem;
  height: 5rem;
  margin-left: -2.5rem;
  margin-top: -2.5rem;
}

#cursor.is-hidden { opacity: 0; }

#cursor-label {
  pointer-events: none;
  position: fixed;
  left: -200px;
  top: -200px;
  z-index: 9998;
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-weight: 700;
  font-size: max(1rem, min(1vw, 1.4rem));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  transform: translate(1.4rem, -50%);
  opacity: 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}

#cursor-label.is-visible { opacity: 1; }


/* ============================================================
   CUSTOM PROPERTIES
============================================================ */
:root {
  --c-text:             #000;
  --c-text-alt:         #fff;
  --c-text-light:       #777;
  --c-bg:               #fff;
  --c-bg-alt:           #000;
  --c-placeholder:      #aca7a7;
  --c-shape:            #d6d0d0;
  --c-overlay-modal:    rgba(0,0,0,.5);

  --header-h:           max(8rem, min(5vw, 10rem));
  --header-p:           max(2.25rem, min(2.25vw, 4.5rem));

  --columns:            4;
  --gutter:             2rem;
  --width:              90vw;
  --height:             100svh;

  --offset:             calc((100vw - var(--width)) / 2);
  --col:                calc((var(--width) - (var(--columns) - 1) * var(--gutter)) / var(--columns));
  --col-2:              calc(var(--col) * 2 + var(--gutter) * 1);
  --col-3:              calc(var(--col) * 3 + var(--gutter) * 2);
  --col-4:              calc(var(--col) * 4 + var(--gutter) * 3);
  --col-6:              calc(var(--col) * 6 + var(--gutter) * 5);
  --col-8:              calc(var(--col) * 8 + var(--gutter) * 7);
}
@media screen and (min-width: 960px)  { :root { --columns: 8;  --width: 95vw; } }
@media screen and (min-width: 1280px) { :root { --columns: 12; --width: 94vw; } }


/* ============================================================
   RESET
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
}
blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,
iframe,legend,li,ol,p,pre,ul {
  border: none; margin: 0; padding: 0;
}
html {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  font-size: 10px;
}
@media screen and (min-width: 1280px) { html { font-size: .49vw; } }
@media screen and (min-width: 1920px) { html { font-size: 10px; } }

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: 'DM Sans', Helvetica, sans-serif;
  font-weight: 500;
  font-size: max(1.6rem, min(1.6vw, 2rem));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  min-height: 100%;
  width: 100%;
}
body::-webkit-scrollbar { display: none; }

h1,h2,h3,h4,h5,h6 { font-size: 1em; font-weight: 400; text-wrap: balance; }
b, strong { display: inline-block; font-weight: 700; }
a, a:visited { color: inherit; text-decoration: none; }
ul { list-style: none; }
em, i { font-style: normal; }
audio,canvas,iframe,img,svg,video { display: block; height: auto; max-width: 100%; width: 100%; }
button { all: unset; background-color: inherit; border: none; font-family: inherit; font-size: inherit; cursor: pointer; }
svg { height: auto; width: auto; }
address { font-style: normal; }

em     { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
strong { font-family: 'Bricolage Grotesque', Helvetica, sans-serif; font-weight: 800; }

::selection { background: var(--c-text); color: var(--c-bg); }


/* ============================================================
   FONT FAMILIES
============================================================ */
.ff-base    { font-family: 'DM Sans', Helvetica, sans-serif; font-weight: 400; letter-spacing: inherit; }
.ff-medium  { font-family: 'DM Sans', Helvetica, sans-serif; font-weight: 500; letter-spacing: -.01em; }
.ff-bold    { font-family: 'DM Sans', Helvetica, sans-serif; font-weight: 700; letter-spacing: inherit; }
.ff-display { font-family: 'Bricolage Grotesque', Helvetica, sans-serif; font-weight: 800; letter-spacing: -.015em; }
.ff-serif   { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: max(2rem, min(1.8vw, 2.6rem)); letter-spacing: -.005em; }


/* ============================================================
   FONT SIZE SCALE
============================================================ */
.fs-160 { font-size: max(5.4rem, min(8vw,  16rem));  line-height: 80%; }
.fs-100 { font-size: max(4rem,   min(5vw,  10rem));  line-height: 85%; }
.fs-80  { font-size: max(4rem,   min(6vw,   8rem)); }
.fs-60  { font-size: max(2.8rem, min(4vw,   6rem)); }
.fs-48  { font-size: max(2.4rem, min(2.4vw, 4.8rem)); }
.fs-40  { font-size: max(2.8rem, min(2.8vw, 4rem)); }
.fs-28  { font-size: max(2rem,   min(2vw,   2.8rem)); }
.fs-24  { font-size: max(1.8rem, min(1.8vw, 2.4rem)); line-height: 110%; }
.fs-22  { font-size: max(1.6rem, min(1.6vw, 2.2rem)); }
.fs-20  { font-size: max(1.6rem, min(1.8vw, 2rem)); }
.fs-18  { font-size: max(1.6rem, min(1.8vw, 1.8rem)); }
.fs-16  { font-size: max(1.4rem, min(1.6vw, 1.6rem)); }
.fs-14  { font-size: max(1.4rem, min(1.4rem, 1.4rem)); }


/* ============================================================
   SPACING — margin-bottom utilities
============================================================ */
.sp-300 { margin-bottom: max(15rem,  min(15vw,  30rem)); }
.sp-200 { margin-bottom: max(10rem,  min(10vw,  20rem)); }
.sp-150 { margin-bottom: max(7.5rem, min(7.5vw, 15rem)); }
.sp-140 { margin-bottom: max(6rem,   min(7vw,   14rem)); }
.sp-100 { margin-bottom: max(5rem,   min(5vw,   10rem)); }
.sp-80  { margin-bottom: max(4rem,   min(4vw,    8rem)); }
.sp-60  { margin-bottom: max(3rem,   min(3vw,    6rem)); }
.sp-30  { margin-bottom: max(1.5rem, min(1.5vw,  3rem)); }
.sp-15  { margin-bottom: max(1rem,   min(1vw,  1.5rem)); }


/* ============================================================
   COLOUR UTILITIES
============================================================ */
.c-text       { color: var(--c-text); }
.c-text-alt   { color: var(--c-text-alt); }
.c-text-light { color: var(--c-text-light); }
.c-bg-alt     { background-color: var(--c-bg-alt); }


/* ============================================================
   TEXT UTILITIES
============================================================ */
.tt-u   { text-transform: uppercase; }
.tt-c   { text-transform: capitalize; }
.ta-c   { text-align: center; }
.ta-r   { text-align: right; }
.lh-85  { line-height: 85%; }
.lh-110 { line-height: 110%; }
.o-h    { overflow: hidden; }
.ml-a   { margin-left: auto; }
.wc-t   { will-change: transform; }


/* ============================================================
   LAYOUT
============================================================ */
.container {
  margin: 0 auto;
  position: relative;
  width: var(--width);
}


/* ============================================================
   LINK-U — sliding underline animation
============================================================ */
.link-u { position: relative; width: fit-content; }
.link-u:hover::after  { transform: scaleX(0); }
.link-u:hover::before { transform: scaleX(1); }
.link-u::after, .link-u::before {
  background: var(--c-text);
  bottom: -.5rem;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  transform-origin: right;
  transition: transform 1s cubic-bezier(.19,1,.22,1);
  width: 100%;
}
.link-u::before { transform: scaleX(0); transform-origin: left; transition-delay: .3s; }
.link-u.is-alt::after,   .link-u.is-alt::before   { background: var(--c-text-alt); }
.link-u.is-small::after, .link-u.is-small::before  { bottom: -1px; }


/* ============================================================
   DATA-LINK — nav hover flip (bold → italic)
============================================================ */
[data-link] {
  clip-path: polygon(0 0, 120% 0, 120% 100%, 0 100%);
  display: inline-flex;
  position: relative;
}
[data-link] span {
  display: flex;
  position: relative;
  text-transform: uppercase;
  transform: translateY(0);
  transition: transform .75s cubic-bezier(.19,1,.22,1);
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-weight: 800;
  font-size: max(1.6rem, min(1.6vw, 2.2rem));
}
[data-link] span::after {
  bottom: -100%;
  content: attr(data-label);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: max(2rem, min(1.8vw, 2.6rem));
  left: 0;
  line-height: 90%;
  position: absolute;
  text-transform: capitalize;
  white-space: nowrap;
  will-change: transform;
}
@media screen and (min-width: 1280px) {
  [data-link]:hover span { transform: translateY(-100%); }
}


/* ============================================================
   CTA-LINK — arrow slide animation
============================================================ */
.cta-link {
  display: flex;
  gap: 1rem;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}
.cta-link::after {
  background: var(--c-text);
  bottom: -.5rem;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s cubic-bezier(.165,.84,.44,1) .25s;
  width: 100%;
}
.cta-link.is-inview::after { transform: scaleX(1); }
.cta-link:hover .cta-link__arrow span   { transform: translateX(120%); }
.cta-link:hover .cta-link__arrow::before { transform: translateX(0); }
.cta-link .cta-link__arrow {
  display: flex;
  overflow: hidden;
  position: relative;
}
.cta-link .cta-link__arrow::before {
  content: attr(data-label);
  left: 0;
  position: absolute;
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.19,1,.22,1);
}
.cta-link .cta-link__arrow span {
  transform: translateX(0);
  transition: transform .75s cubic-bezier(.19,1,.22,1);
}


/* ============================================================
   SPLIT-TEXT ANIMATION SYSTEM
============================================================ */

/* Char animation */
.st-c { visibility: hidden; }
.st-c .cm { clip-path: inset(-20% -20% -20% -20%); display: inline-block; }
.st-c .ch {
  display: inline-block;
  transform: translate3D(0, 115%, 0);
  will-change: transform;
}
.st-c.is-inview { visibility: visible; }
.st-c.is-inview .ch {
  transform: translateZ(0);
  transition: transform var(--spd, 1.25s) cubic-bezier(.19,1,.22,1)
              calc(var(--idx, 0) * var(--stg, .025s));
}

/* Word animation */
.st-w { visibility: hidden; line-height: var(--lh, 90%); }
.st-w .wm { clip-path: inset(-20% -20% 0 -20%); display: inline-block; overflow: hidden; }
.st-w .wo {
  display: inline-block;
  transform: translate3D(0, 115%, 0);
  will-change: transform;
}
.st-w.is-inview { visibility: visible; }
.st-w.is-inview .wo {
  transform: translateZ(0);
  transition: transform var(--spd, 1.25s) cubic-bezier(.19,1,.22,1)
              calc(var(--idx, 0) * var(--stg, .075s));
}

/* Line animation */
.st-l { visibility: hidden; line-height: var(--lh, 110%); }
.st-l .lm { clip-path: inset(-20% -20% -20% -20%); display: block; overflow: hidden; }
.st-l .li {
  display: block;
  transform: translate3D(0, 115%, 0);
  will-change: transform;
}
.st-l.is-inview { visibility: visible; }
.st-l.is-inview .li {
  transform: translateZ(0);
  transition: transform var(--spd, 1.25s) cubic-bezier(.19,1,.22,1)
              calc(var(--idx, 0) * var(--stg, .1s));
}

/* Fade-in items (footer, labels etc.) */
.f-i {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0s;
}
.f-i.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .05s);
}

/* HR reveal */
hr.reveal {
  background: var(--c-shape);
  border: none;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
  transition: none;
}
hr.reveal.is-inview {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(.165,.84,.44,1) .5s;
}

/* Fade-up block (for images / gallery items) */
.fade-up { opacity: 0; transform: translateY(4rem); transition: none; }
.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .12s),
              transform 1.2s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .12s);
}


/* ============================================================
   LOADER
============================================================ */
#loader {
  background: var(--c-bg);
  height: 100vh;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transform: translateY(100%);
  width: 100vw;
  will-change: transform;
  z-index: 30;
}


/* ============================================================
   OVERLAY (modal / transition)
============================================================ */
.overlay {
  background: var(--c-overlay-modal);
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  will-change: opacity;
  z-index: 25;
}


/* ============================================================
   HEADER
============================================================ */
.header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  mix-blend-mode: difference;
  padding: var(--header-p) var(--offset);
  position: fixed;
  top: 0;
  transition: transform 1.5s cubic-bezier(.19,1,.22,1);
  width: 100%;
  will-change: transform;
  z-index: 35;
}
.header.is-collapsed { transform: translateY(-100%); }
@media screen and (min-width: 960px) { .header { justify-content: flex-start; } }
.header__logo, .header__nav, .header__cta { pointer-events: all; }
.header__nav { display: none; gap: 1.6rem; margin-left: var(--offset); }
@media screen and (min-width: 960px) { .header__nav { display: flex; } }
.header__cta    { margin-left: auto; color: var(--c-text-alt); }
.header__toggle { display: none; color: var(--c-text-alt); }
@media screen and (max-width: 959.8px) {
  .header__toggle { display: block; }
  .header__cta    { display: none; }
}

.logo-mark {
  display: block;
  height: max(1.8rem, min(1.8vw, 3rem));
  width: auto;
  filter: invert(1);
}


/* ============================================================
   MOBILE MENU
============================================================ */
.menu-mobile {
  background: var(--c-bg-alt);
  color: var(--c-text-alt);
  height: 100dvh;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateY(-100vh);
  width: 100vw;
  z-index: 50;
  will-change: transform;
  transition: transform .6s cubic-bezier(.19,1,.22,1), opacity .4s ease;
}
.menu-mobile.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.menu-mobile__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}
.menu-mobile__top {
  align-items: center;
  display: flex;
  height: var(--header-h);
  justify-content: space-between;
  padding-left: var(--offset);
  padding-right: var(--offset);
}
.menu-mobile .logo-mark { height: 8rem; }
#menuClose {
  color: var(--c-text-alt);
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-size: max(1.6rem, min(1.6vw, 2.2rem));
  font-weight: 800;
  text-transform: uppercase;
}
.menu-mobile__nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  padding: var(--offset);
}
.menu-mobile__page {
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-size: 8rem;
  font-weight: 800;
  line-height: 90%;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
.menu-mobile__bottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-left: var(--offset);
  padding-right: var(--offset);
}


/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--c-bg-alt);
  color: var(--c-text-alt);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 40;
}
@media screen and (min-width: 1280px) { .footer { min-height: 100vh; } }

.footer__top {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(2, var(--col-2));
  margin-bottom: max(15rem, min(15vw, 20rem));
  padding: var(--header-p) var(--offset);
}
@media screen and (min-width: 960px) {
  .footer__top { grid-template-columns: repeat(2, var(--col-4)); margin-bottom: 0; }
}
@media screen and (min-width: 1280px) {
  .footer__top { grid-template-columns: repeat(2, var(--col-4)) repeat(2, var(--col-2)); }
}

.footer__legal, .footer__social {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer__monogram { padding-bottom: max(3rem, min(3vw, 6rem)); }
@media screen and (max-width: 959.8px) { .footer__monogram { padding-top: .5rem; } }

.footer__bottom { color: var(--c-text-alt); display: flex; flex-direction: column; margin-top: auto; }

.footer__wordmark {
  display: block;
  width: var(--width);
  margin: 0 auto var(--offset);
  overflow: visible;
}

.footer__wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translateY(100%);
  will-change: transform;
  transition: transform 1.5s cubic-bezier(.19,1,.22,1);
}

.footer__wordmark text {
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-weight: 800;
  fill: var(--c-text-alt);
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.footer__wordmark-inner {
  display: block;
  overflow: hidden;
}

.footer__wordmark.is-inview svg {
  transform: translateY(0);
}

.footer__divider {
  border-bottom: 1px solid var(--c-text-alt);
  display: flex;
  justify-content: space-between;
  margin-bottom: max(3rem, min(3vw, 6rem));
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2rem;
  width: var(--width);
}
@media screen and (max-width: 959.8px) {
  .footer__divider { display: grid; grid-template-columns: repeat(2, var(--col-2)); }
}


/* ============================================================
   PAGE
============================================================ */
#view { background: var(--c-bg); min-height: 100svh; }
.page { background: var(--c-bg); }


/* ============================================================
   HERO SECTION
============================================================ */
.hero__wrap {
  background: #fff;
  display: grid;
  position: relative;
  width: 100vw;
}
.hero__wrap, .hero { height: var(--height); }
.hero {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding-bottom: max(4rem, min(3vw, 6rem));
  padding-top: var(--header-h);
  padding-left: var(--offset);
  padding-right: var(--offset);
  position: absolute;
  width: 100vw;
}

.hero__img-wrap {
  position: absolute;
  top: 8vw;
  left: 8vw;
  right: 8vw;
  height: calc(100svh - 16vw);
  overflow: hidden;
  animation: hero-img-crop 3.6s cubic-bezier(0.76, 0, 0.24, 1) 0.3s both;
}

@keyframes hero-img-crop {
  from { top: 0; left: 0; right: 0; height: 100svh; }
  to   { top: 8vw; left: 8vw; right: 8vw; height: calc(100svh - 16vw); }
}

.hero__img {
  width: 100%;
  height: 115%;
  position: relative;
  top: -7.5%;
  object-fit: cover;
  object-position: center top;
  display: block;
  will-change: transform;
}

.hero__title__wrap {
  font-size: clamp(4rem, 14vw, 24rem);
  line-height: 80% !important;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 10;
}

.hero__title {
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hero__description {
  font-size: max(2.4rem, min(2.4vw, 4.8rem));
  line-height: 1.3;
  margin-top: max(6rem, min(8vw, 12rem));
  z-index: 10;
}


/* ============================================================
   PAGE CONTENT
============================================================ */
.page__content { background: var(--c-bg); position: relative; z-index: 10; }


/* ============================================================
   TEXT SECTION
============================================================ */
.text { padding-top: max(10rem, min(12vw, 22rem)); }
.text__content {
  display: flex;
  flex-direction: column;
  gap: max(3rem, min(3vw, 6rem));
  justify-content: space-between;
}
@media screen and (min-width: 960px) { .text__content { flex-direction: row; } }
@media screen and (min-width: 960px) {
  .text__cta { margin-left: auto; width: var(--col-2); }
}


/* ============================================================
   PROJECTS SECTION
============================================================ */
.projects--highlighted__item {
  display: grid;
  gap: max(1.5rem, min(1.5vw, 3rem));
  align-content: start;
}

.projects-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  row-gap: max(3rem, min(3vw, 6rem));
  margin-bottom: max(6rem, min(7vw, 14rem));
}
@media screen and (min-width: 960px) {
  .projects-row {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .projects-row--reversed {
    grid-template-columns: 1fr 2fr;
  }
}

.projects-col-stack {
  display: flex;
  flex-direction: column;
  gap: max(5rem, min(5vw, 10rem));
}

.project {
  align-self: flex-start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 100%;
  opacity: 0;
  position: relative;
  transform: translate3D(0, 15%, 0);
  transition:
    opacity 1.5s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .1s),
    transform 1.5s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .1s);
}
.project.is-inview { opacity: 1; transform: translateZ(0); }

.project__media {
  aspect-ratio: 16/10;
  background: var(--c-placeholder);
  clip-path: inset(10% 10% 10% 10%);
  overflow: hidden;
  position: relative;
  transition: clip-path 2s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .1s);
  width: 100%;
}
.is-inview .project__media { clip-path: inset(0 0 0 0); }

.project__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(.19,1,.22,1);
}
.project__thumb--hover {
  opacity: 0;
}
.project:hover .project__thumb--hover { opacity: 1; transform: scale(1.06); }
.project:hover .project__thumb:not(.project__thumb--hover) { transform: scale(1.06); }

.project__data__top { display: flex; justify-content: space-between; }
.project__title { display: flex; margin-bottom: .3rem; }


/* ============================================================
   PROJECTS COUNTER
============================================================ */
.projects__counter {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--offset);
}


/* ============================================================
   SLIDER SECTION
============================================================ */
@media screen and (min-width: 1280px) { .slider-wrapper { height: 150svh; } }

.slider {
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 5;
}
@media screen and (min-width: 1280px)  { .slider { height: 100svh; } }

.slider-pagination {
  align-items: center;
  bottom: 2rem;
  display: flex;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  z-index: 13;
}
@media screen and (max-width: 959.8px) { .slider-pagination { display: none; } }

.slider-pagination button {
  padding: 2rem 1rem;
  transition: opacity .5s cubic-bezier(.19,1,.22,1);
}
.slider-pagination button.is-disabled { opacity: .5; }

.slider-pagination__item {
  border: 1px solid #fff;
  display: flex;
  height: 2.5rem;
  transform: translateY(300%);
  transition: width 1.2s cubic-bezier(.165,.84,.44,1), transform 0s;
  width: 0;
  will-change: transform, width;
}
.slider-pagination.is-inview .slider-pagination__item {
  transform: translateY(0);
  transition:
    width 1.2s cubic-bezier(.165,.84,.44,1),
    transform 1.2s cubic-bezier(.19,1,.22,1) calc(var(--delay, 0) * .05s + .2s);
}
.slider-pagination__item.is-active { border: 2px solid #fff; width: 4rem; }

.swiper-wrapper {
  transition-timing-function: cubic-bezier(.77,0,.175,1);
  will-change: transform;
  display: flex;
}
@media screen and (max-width: 959.8px) {
  .swiper-wrapper {
    max-width: 100vw;
    overflow-x: scroll;
    padding-left: var(--offset);
    scroll-padding: var(--offset);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: var(--gutter);
    transition: padding-left 2s cubic-bezier(.19,1,.22,1);
  }
  .swiper-wrapper::-webkit-scrollbar { display: none; }
}

.swiper-slide {
  aspect-ratio: 2300/1400;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(.77,0,.175,1);
  width: fit-content;
  will-change: transform;
  z-index: 5;
}
@media screen and (max-width: 959.8px) {
  .swiper-slide {
    scroll-snap-align: center;
    width: var(--col-4);
    aspect-ratio: 1920/1200;
  }
}

.swiper-media {
  transition: transform 1.2s cubic-bezier(.77,0,.175,1);
  will-change: transform;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.slider-navigation {
  display: grid;
  grid-template-columns: .75fr 1fr .75fr;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 12;
}
@media screen and (max-width: 959.8px) { .slider-navigation { display: none; } }


/* ============================================================
   ACTION / CTA SECTION
============================================================ */
.action {
  display: flex;
  gap: max(3rem, min(3vw, 6rem));
  justify-content: flex-end;
  padding-left: var(--offset);
  padding-right: var(--offset);
}
@media screen and (min-width: 960px) { .action { flex-direction: row; gap: var(--gutter); } }
.action__inner {
  display: flex;
  gap: var(--gutter);
  justify-content: space-between;
  width: var(--col-2);
}
@media screen and (min-width: 960px) {
  .action__inner { justify-content: flex-start; width: var(--col-3); }
}


/* ============================================================
   BIO INLINE IMAGE PARAGRAPH
============================================================ */
.bio-inline {
  overflow: visible;
  visibility: hidden;
  transform: translate3D(0, 115%, 0);
  will-change: transform;
}

.bio-inline.is-inview {
  visibility: visible;
  transform: translateZ(0);
  transition: transform 1.25s cubic-bezier(.19,1,.22,1);
}

.bio-inline__img-wrap {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  height: 0;
  overflow: visible;
  width: calc(min(5.5vw, 9rem) * 4 / 3);
  margin: 0 .35em;
}

.bio-inline__img {
  position: absolute;
  bottom: -8px;
  left: 0;
  height: min(5.5vw, 9rem);
  width: calc(min(5.5vw, 9rem) * 4 / 3);
  border-radius: 0;
  overflow: hidden;
  display: block;
}


/* ============================================================
   PROJECT PAGE — HERO
============================================================ */
.project-hero {
  height: 100svh;
  overflow: hidden;
  position: relative;
  width: 100vw;
}

@keyframes hero-enter {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

.project-hero__img {
  width: 100%;
  height: 115%;
  position: relative;
  top: -7.5%;
  object-fit: cover;
  display: block;
  will-change: transform;
  animation: hero-enter 1.8s cubic-bezier(.19,1,.22,1) .2s both;
}

.project-hero__placeholder {
  width: 100%;
  height: 100%;
  background: #111;
}


/* ============================================================
   PROJECT INTRO
============================================================ */
.project-intro__title { margin-bottom: max(4rem, min(4vw, 8rem)); }


/* ============================================================
   UTILITY — shared inline-style replacements
============================================================ */

/* Section heading label e.g. "The Situation" */
.section-label { font-size: max(2.4rem, min(2.4vw, 4.2rem)); }

/* Large intro paragraph */
.intro-lead { font-size: max(2.4rem, min(2.4vw, 4.8rem)); line-height: 1.3; }

/* Standard project body copy */
.project-body { font-size: max(1.5rem, min(1.5vw, 2.4rem)); line-height: 1.6; }

/* Metadata column in project intros */
.project-meta {
  display: flex;
  flex-direction: column;
  gap: max(2.5rem, min(2.5vw, 5rem));
  margin-left: auto;
}

/* Constrain text column to 8-col width */
.mw-col-8 { max-width: min(var(--col-8), 100%); }

/* Muted label (scope/role/agency tags) */
.label-muted { color: var(--c-text-light); }

/* Sticky portrait in about page */
.sticky-portrait {
  width: min(var(--col-4), 40%);
  flex-shrink: 0;
  position: sticky;
  top: 8rem;
}

/* Footer logo height */
.footer .logo-mark { height: max(1.8rem, min(1.8vw, 3rem)); }


/* ============================================================
   PROJECT TEXT SECTION — label + body two-col
============================================================ */
.project-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: max(3rem, min(3vw, 5rem));
  align-items: start;
}
.project-text > div + div { padding-top: max(3rem, min(3vw, 6rem)); }
.gallery + section { margin-top: max(8rem, min(8vw, 16rem)); }
@media screen and (min-width: 960px) {
  .project-text { grid-template-columns: var(--col-2) var(--col-6); gap: var(--gutter); }
}


/* ============================================================
   PROJECT CREDITS GRID
============================================================ */
.project-credits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: max(2.5rem, min(2.5vw, 5rem));
}
@media screen and (min-width: 960px) {
  .project-credits { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   NEXT PROJECT
============================================================ */
.next-project {
  display: flex;
  justify-content: flex-end;
  padding-top: max(4rem, min(4vw, 8rem));
  padding-bottom: max(8rem, min(8vw, 16rem));
}

.next-project__inner {
  display: flex;
  flex-direction: column;
  gap: max(1rem, min(1vw, 1.5rem));
}

.next-project__label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--c-text-light);
  font-size: max(2rem, min(1.8vw, 2.6rem));
}

.next-project__title {
  font-family: 'Bricolage Grotesque', Helvetica, sans-serif;
  font-weight: 800;
  font-size: max(5.4rem, min(8vw, 16rem));
  line-height: 80%;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  gap: .2em;
  transition: letter-spacing 1s cubic-bezier(.19,1,.22,1);
}
.next-project__title:hover { letter-spacing: .04em; }


/* ============================================================
   PROJECT GALLERY
============================================================ */
.gallery .container { margin-bottom: max(1.5rem, min(1.5vw, 2.5rem)); }
.gallery img { display: block; width: 100%; height: auto; }

.gallery__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(1.5rem, min(1.5vw, 2.5rem));
}

.gallery__grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(1.5rem, min(1.5vw, 2.5rem));
}
.gallery__grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(1.5rem, min(1.5vw, 2.5rem));
  max-width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 599.8px) {
  .gallery__grid-2 { grid-template-columns: 1fr; }
  .gallery__grid-3 { grid-template-columns: 1fr; }
  .gallery__grid-4 { grid-template-columns: 1fr 1fr; }
}
.gallery video {
  width: 100%;
  display: block;
}

/* ── CUSTOM YOUTUBE PLAYER ──────────────────────────────────── */
.yt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.yt-player video,
.yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  object-fit: cover;
}
.yt-player__loader {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 2;
  transition: opacity .6s cubic-bezier(.19,1,.22,1);
}
.yt-player__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.yt-player__big-play,
.yt-player__bar {
  z-index: 3;
}
.yt-player__big-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s;
}
.yt-player__big-play svg {
  width: 5.6rem;
  height: 5.6rem;
  fill: #fff;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.5));
}
.yt-player.is-playing:not(.is-muted) .yt-player__big-play {
  opacity: 0;
  pointer-events: none;
}
.yt-player__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3.2rem 2rem 1.6rem;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s cubic-bezier(.19,1,.22,1), transform .35s cubic-bezier(.19,1,.22,1);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.yt-player:hover .yt-player__bar,
.yt-player.is-paused .yt-player__bar {
  opacity: 1;
  transform: translateY(0);
}
.yt-player__progress {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,.3);
}
.yt-player__progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  pointer-events: none;
}
.yt-player__scrubber {
  position: absolute;
  inset: -10px 0;
  width: 100%;
  height: calc(100% + 20px);
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.yt-player__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yt-player__left,
.yt-player__right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.yt-player__btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 1;
}
.yt-player__btn svg {
  width: 2rem;
  height: 2rem;
  fill: #fff;
}
.yt-player__time {
  font-size: 1.2rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
}