@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Lato:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* ══════════════════════════════════════
   RESET & ROOT
══════════════════════════════════════ */

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

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

:root {
  /* couleurs */
  --primary: #39422F;
  --secondary: #332D1F;
  --black: #1A1A14;
  --beige-100: #E8E0CC;
  --beige-200: #F9E4C3;
  
  --beige-300: #E3CEAC;
  --beige-500: #C4A97D;

  /* typos */
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Lato", sans-serif;

  /* tailles typos */
  --fs-hero: 4rem;
  --fs-hero-italic: 4.25rem;
  --fs-title: 2.25rem;
  --fs-section-title: 1.5rem;
  --fs-subtitle: 1.15rem;
  --fs-medium: 1rem;
  --fs-small: 0.75rem;

  /* boldness */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;

  /* layout */
  --nav-height: 5.625rem;
  --wrapper-narrow: 46.25rem;
  --wrapper-default: 60rem;
  --wrapper-wide: 70rem;

}

/* ══════════════════════════════════════
   BODY
══════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  font-size: clamp(16px, calc(11.4px + 0.375vw), 18.4px);
}

body {
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 100;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--beige-200);
  background-color: var(--primary);
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: 100;
}

.nav-wrapper {
  max-width: var(--wrapper-default);
  ;
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-logo img {
  height: 2.25rem;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
}

.nav-links a {
  font-size: var(--fs-medium);
  font-weight: var(--fw-medium);
  color: var(--beige-200);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  padding: 0.5rem 0.25rem;
}

.nav-links a.nav-link--active {
  text-decoration: underline;
  text-decoration-color: var(--beige-200);
  text-underline-offset: 4px;
}

.nav-links a:hover {
  opacity: 0.6;
}

.nav-lang {
  font-family: var(--font-sans);
  font-size: var(--fs-medium);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--beige-200);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  transition: opacity 0.2s ease;
}

.nav-lang:hover {
  opacity: 0.6;
}

.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-lang__chevron {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--beige-200);
  flex-shrink: 0;
}

.nav-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-medium);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--beige-200);
  text-decoration: none;
  border: 1px solid var(--beige-200);
  padding: 0.7rem 1rem;
  transition: opacity 0.2s ease;
}

.nav-cta:hover {
  opacity: 0.6;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--beige-200);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav--has-progress {
  padding-bottom: 1.75rem;
}

.nav--scrolled {
  background-color: var(--primary);
  transition: background-color 0.3s ease;
}

#cs-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(232, 224, 204, 0.2);
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#cs-progress-track.is-active {
  opacity: 1;
}

#cs-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--beige-500);
  transition: width 0.12s linear;
  pointer-events: none;
}

#cs-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--beige-500);
}

#cs-progress-pct {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--beige-100);
  opacity: 0;
  transition: opacity 0.2s ease, left 0.12s linear;
  pointer-events: none;
  white-space: nowrap;
}

#cs-progress-pct.visible {
  opacity: 1;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */

.hero {
  width: 100%;
  min-height: 100vh;
  padding-top: var(--nav-height);
  padding-bottom: calc(var(--nav-height) * 0.5);
  background-color: var(--primary);
  background-image: url('design-space-paper-textured-background.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-wrapper {
  max-width: var(--wrapper-default);
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.hero-left {
  flex: 1;
  min-width: 0;
}

.hero-right {
  position: relative;
  width: 22.5rem;
  height: 27.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-wireframes {
  position: relative;
  width: 15rem;
  height: 18.75rem;
}

.hero-wireframe {
  position: absolute;
  width: 12.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 1px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-wireframe--work { z-index: 3; transition-delay: 0ms; }
.hero-wireframe--hero { z-index: 2; transition-delay: 80ms; }
.hero-wireframe--cta  { z-index: 1; transition-delay: 160ms; }


.hero-wireframes.is-spread .hero-wireframe--work {
  transform: translate(-50%, -50%) rotate(2deg);
}
.hero-wireframes.is-spread .hero-wireframe--hero {
  transform: translate(calc(-50% + 3.4375rem), calc(-50% - 1.875rem)) rotate(8deg);
}
.hero-wireframes.is-spread .hero-wireframe--cta {
  transform: translate(calc(-50% - 2.375rem), calc(-50% + 2.375rem)) rotate(-5deg);
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  color: var(--beige-500);
  display: flex;
  flex-direction: column;
}

.hero-title__line {
  font-size: var(--fs-hero);
  text-transform: uppercase;
  line-height: 0.9;
  display: block;
  white-space: nowrap;
}

.hero-title__italic {
  font-size: var(--fs-hero-italic);
  font-style: italic;
  text-transform: none;
  color: var(--beige-100);
  line-height: 0.9;
  margin-bottom: 0.6rem;
  display: block;
  white-space: nowrap;
}

.hero-context {
  margin-top: 3rem;
  font-family: var(--font-sans);
}

.hero-context__label {
  display: block;
  color: var(--beige-100);
  font-size: var(--fs-medium);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-context__value {
  display: block;
  font-size: var(--fs-medium);
  letter-spacing: 0.1em;
  font-style: italic;
}

@keyframes chevron-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  animation: chevron-bounce 2s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.hero-scroll:hover {
  opacity: 0.6;
}

.hero-scroll svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: var(--beige-200);
  display: block;
}

.hero-star {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* small sparkle — upper-left, above wireframes */
.hero-star--1 {
  width: 1.5rem;
  top: 10%;
  left: 7%;
  opacity: 0.85;
}

/* tiny dot — left side, below star-1, just outside wireframes */
.hero-star--2 {
  width: 1rem;
  top: 19%;
  left: 11%;
  opacity: 0.7;
}

/* large sparkle — top-right corner, outside wireframes */
.hero-star--3 {
  width: 2rem;
  top: 5%;
  right: 4%;
  opacity: 0.9;
}

/* 8-pointed star — lower-right, outside wireframes */
.hero-star--4 {
  width: 1.625rem;
  top: 74%;
  right: 5%;
  opacity: 0.75;
}

/* cross — bottom-right, below wireframes */
.hero-star--5 {
  width: 1.75rem;
  top: 83%;
  right: 4%;
  opacity: 0.8;
}


/* ══════════════════════════════════════
   WORK
══════════════════════════════════════ */

.work {
  background-color: var(--beige-200);
  padding: 3.5rem 0;
}

.work-wrapper {
  max-width: var(--wrapper-wide);
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
}

.work-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
}

.work-filters {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin-top: 1rem;
}

.work-filter {
  font-family: var(--font-sans);
  font-size: var(--fs-medium);
  font-weight: var(--fw-medium);
  color: var(--black);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.work-filter:hover {
  opacity: 0.8;
}

.work-filter--active {
  opacity: 1;
  border-bottom: 1px solid var(--black);
}

.work-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--black);
  opacity: 0.6;
  margin-top: 0.75rem;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
  height: 4rem;
  overflow: hidden;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 2rem;
}

.work-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.work-card__description {
  font-size: 1rem;
  color: var(--black);
  opacity: 0.7;
  line-height: 1.5;
}

.work-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--beige-300);
  border: 1px solid var(--beige-300);
  overflow: hidden;
  transition: transform 0.35s ease;
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.work-card:hover .work-card__image {
  transform: scale(1.04);
}

.work-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--black);
  padding-top: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-card__tags {
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--black);
  opacity: 0.6;
}

.work-card__link {
  font-family: var(--font-sans);
  font-size: var(--fs-medium);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 1.5rem;
  gap: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
  text-decoration: none;
}

.work-card__link i,
.work-card__link svg {
  width: 1rem;
  height: 1rem;
  transform: translate(-2px, 3px) scale(0.85);
  transition: transform 0.2s ease-in-out;
}

.work-card__link span {
  display: inline-block;
  position: relative;
  transition: transform 0.4s ease-in-out;
  transform-origin: left center;
}

.work-card__link span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--black);
  transition: width 0.2s ease-in-out;
}

.work-card__link:hover i,
.work-card__link:hover svg,
.work-card:hover .work-card__link i,
.work-card:hover .work-card__link svg {
  transform: translate(2px, -2px) scale(1.1);
}

.work-card__link:hover span,
.work-card:hover .work-card__link span {
  transform: scale(1.05);
}

.work-card__link:hover span::after,
.work-card:hover .work-card__link span::after {
  width: 100%;
}


/* ══════════════════════════════════════
   CTA
══════════════════════════════════════ */

.cta {
  background-color: var(--secondary);
  padding: 3rem 0;
}

.cta__wrapper {
  max-width: var(--wrapper-default);
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  width: 100%;
}

.cta__title {
  font-family: var(--font-serif);
  font-size: var(--fs-section-title);
  color: var(--beige-100);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.cta__subtitle {
  color: var(--beige-300);
  max-width: 37.5rem;
  margin-bottom: 2.5rem;
}

.cta__buttons {
  display: flex;
  gap: 2rem;
}

.cta__btn {
  color: var(--beige-100);
  text-decoration: none;
  font-size: var(--fs-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cta__btn i,
.cta__btn svg {
  width: 1rem;
  height: 1rem;
  transform: translate(-2px, 3px) scale(0.85);
  transition: transform 0.3s ease-in-out;
}

.cta__btn span {
  position: relative;
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.3s ease-in-out;
}

.cta__btn span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--beige-100);
  transition: width 0.3s ease-in-out;
}

.cta__btn:hover i,
.cta__btn:hover svg {
  transform: translate(2px, -2px) scale(1.1);
}

.cta__btn:hover span {
  transform: scale(1.05);
}

.cta__btn:hover span::after {
  width: 100%;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */

.footer {
  background-color: var(--primary);
  padding: 3rem 0 2rem;
}

.footer-wrapper {
  max-width: var(--wrapper-default);
  ;
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 10rem 10rem;
  column-gap: 2rem;
  padding-bottom: 1rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-title {
  font-family: var(--font-serif);
  font-size: 2.69rem;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  max-width: 25rem;
  color: var(--beige-100);
  line-height: 1.1;
}

.footer-subtitle {
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  color: var(--beige-200);
}

.footer-copy {
  font-size: var(--fs-small);
  color: var(--beige-300);
}

.footer-nav {
  margin-left: auto;
}

.footer-contact {
  padding-left: 2rem;
}

.footer-col-title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--beige-200);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--beige-300);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  font-size: 0.875rem;
  color: var(--beige-100);
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-block;
  padding: 0.4rem 0.5rem;
  margin: -0.4rem -0.5rem;
}

.footer-link:hover {
  opacity: 0.6;
}

.footer--minimal {
  padding: 2rem 0;
}

.footer--minimal .footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer--minimal .footer-copy {
  margin-top: 0;
}

.footer--minimal .footer-link {
  font-size: var(--fs-small);
}

.footer-minimal__links {
  display: flex;
  gap: 1.5rem;
}

/* ══════════════════════════════════════
   CASE STUDY HERO
══════════════════════════════════════ */

.case-hero {
  width: 100%;
  padding-top: var(--nav-height);
  padding-bottom: 5rem;
  background-color: var(--primary);
  background-image: url('design-space-paper-textured-background.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-hero__wrapper {
  max-width: var(--wrapper-default);
  ;
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  padding-top: 2rem;
}

.case-hero__breadcrumb {
  font-size: var(--fs-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beige-300);
  margin-bottom: 2rem;
}

.case-hero__breadcrumb-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
  padding: 0.35rem 0.1rem;
}

.case-hero__breadcrumb-link:hover {
  opacity: 0.6;
}

.case-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: stretch;
}

.case-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  max-width: 31.25rem;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.case-hero__left {
  min-width: 0;
}

.case-hero__description {
  color: var(--beige-200);
  max-width: 37.5rem;
}

.case-hero__em--italic {
  font-style: italic;
  color: var(--beige-100);
}

.case-em--color {
  font-style: italic;
  color: var(--beige-500);
}

.case-bold--color {
  color: var(--secondary);
  font-weight: 600;
}

.case-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 10rem;
}

.case-hero__readtime {
  font-size: var(--fs-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--beige-300);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  color: var(--beige-300);
  margin-bottom: 4rem;
}

.case-hero__readtime--mobile {
  display: none;
}

.case-hero__meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.case-hero__meta-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beige-300);
}

.case-hero__meta-value {
  font-size: 1rem;
  color: var(--beige-100);
}

.case-hero__carousel-wrapper {
  position: relative;
  margin-top: 3rem;
  max-width: 100%;
}

@media (max-width: 768px) {
  .case-hero__carousel-wrapper {
    overflow: hidden;
  }
  
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
}

.case-hero__carousel-track {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.case-hero__carousel {
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
  padding-block: 0.625rem;
  max-width: 100%;
}

.case-hero__carousel::-webkit-scrollbar {
  display: none;
}

.case-hero__carousel-arrow {
  position: absolute;
  right: -1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--beige-300);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  opacity: 0.5;
  opacity: 0.7;
  transition: opacity 0.3s ease, background-color 0.2s ease;
  z-index: 10;
}

.case-hero__carousel-arrow:hover {
  opacity: 1;
  background-color: var(--beige-500);
}

.case-hero__carousel-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

.case-hero__carousel-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.case-hero__slide {
  width: 13.75rem;
  height: 9.375rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease;
}

.case-hero__slide:hover {
  transform: scale(1.04);
}

.case-hero__slide::before,
.case-hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent 49%, var(--beige-300) 49%, var(--beige-300) 51%, transparent 51%),
    linear-gradient(to bottom left, transparent 49%, var(--beige-300) 49%, var(--beige-300) 51%, transparent 51%);
}

.case-hero__slide:has(img)::before,
.case-hero__slide:has(img)::after {
  display: none;
}

.case-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* ══════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 1rem;
  user-select: none;
}

.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }

.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }

.lightbox__prev.is-hidden,
.lightbox__next.is-hidden { display: none; }

/* ══════════════════════════════════════
   CASE STUDY SECTIONS
══════════════════════════════════════ */

.case-section {
  padding: 3rem 0;
}

.case-section--dark {
  background-color: var(--beige-300);
  color: var(--black);
}

.case-section--dark .case-number,
.case-section--dark .case-label,
.case-section--dark .case-content {
  color: var(--black);
}

.case-section--dark .case-number {
  opacity: 0.4;
}

.case-section--light {
  background-color: var(--beige-200);
  color: var(--black);
}

.case-section--light .case-number,
.case-section--light .case-label,
.case-section--light .case-content {
  color: var(--black);
}

.case-wrapper {
  max-width: var(--wrapper-narrow);
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
}

.case-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.case-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--black);
  opacity: 0.4;
}

.case-label {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--black);
}

.case-title {
  font-weight: 500;
  font-style: italic;
  padding-bottom: 0.5em;
  margin-top: 1rem;
}

.case-tags {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-top: 0.25rem;
}

.case-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 1rem;
  color: var(--black);
  line-height: 1.6em;
}

.case-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.case-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
  cursor: pointer;
}

.case-embed {
  display: block;
  width: 100%;
  border: none;
  margin-top: 0.5rem;
}

.case-link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-medium);
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  width: fit-content;
  transition: opacity 0.15s ease;
}

.case-link-button::before {
  content: '→';
  text-decoration: none;
  display: inline-block;
}

.case-link-button:hover {
  opacity: 0.6;
}

.case-list {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: disc;
}

.case-list li {
  padding-left: 0.25rem;
}

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */

.about-hero {
  width: 100%;
  min-height: 100vh;
  background-color: var(--primary);
  background-image: url('design-space-paper-textured-background.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 4rem;
}

.about-hero__wrapper {
  align-items: start;
  max-width: var(--wrapper-default);
  ;
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 20rem;
  gap: 4rem;
}

.about-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  color: var(--beige-200);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.about-hero__name {
  color: var(--beige-500);
}

.about-hero__tagline {
  font-style: italic;
  font-size: var(--fs-subtitle);
  color: var(--beige-100);
  margin-bottom: 4rem;
  line-height: 1.5;
}

.about-hero__photo--mobile {
  display: none;
}

.about-hero__bio {
  color: var(--beige-200);
  margin-bottom: 1rem;
  max-width: 30rem;
  line-height: 1.6;
}

.about-hero__em {
  color: var(--beige-500);
}

.about-hero__photo {
  width: 18.75rem;
  height: 25rem;
  object-fit: cover;
  border: 1px solid var(--beige-300);
}

.about-worlds {
  background-color: var(--beige-200);
  padding: 3.5rem 0;
}

.about-worlds__wrapper {
  max-width: var(--wrapper-default);
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  width: 100%;
}

.about-worlds__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.about-worlds__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.about-worlds__subtitle {
  font-style: italic;
  color: var(--secondary);
  line-height: 1.5;
}

.about-worlds__resume {
  font-size: var(--fs-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.about-worlds__resume i,
.about-worlds__resume svg {
  width: 1rem;
  height: 1rem;
  transform: translate(-2px, 3px) scale(0.85);
  transition: transform 0.4s ease-in-out;
}

.about-worlds__resume span {
  position: relative;
  display: inline-block;
  transform-origin: left top;
  transition: transform 0.4s ease-in-out;
}

.about-worlds__resume span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--secondary);
  transition: width 0.4s ease-in-out;
}

.about-worlds__resume:hover i,
.about-worlds__resume:hover svg {
  transform: translate(2px, -2px) scale(1.1);
}

.about-worlds__resume:hover span {
  transform: scale(1.05);
}

.about-worlds__resume:hover span::after {
  width: 100%;
}

.about-worlds__content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: start;
}

.about-worlds__photo {
  width: 15.625rem;
  object-fit: cover;
}

.about-worlds__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about-worlds__item {
  display: flex;
  gap: 2rem;
  align-items: center;
  color: var(--secondary);
  line-height: 1.7;
}

.about-worlds__diamond {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.about-personal {
  background-color: var(--beige-300);
  padding: 2.5rem 0;
}

.about-personal__wrapper {
  max-width: var(--wrapper-default);
  ;
  margin: 0 auto;
  padding: 0 clamp(2rem, calc(-83px + 9.4vw), 5rem);
  width: 100%;
}

.about-personal__title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.about-personal__text {
  color: var(--secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 46.25rem;
}

.about-currently {
  list-style: none;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-currently__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.about-currently__label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  min-width: 5rem;
  flex-shrink: 0;
}

.about-currently__item::after {
  content: '→';
  color: var(--secondary);
  opacity: 0.4;
  font-size: var(--fs-small);
  order: 1;
}

.about-currently__value {
  font-family: var(--font-serif);
  font-size: var(--fs-medium);
  font-style: italic;
  color: var(--secondary);
  order: 2;
}

.about-personal__content {
  display: grid;
  grid-template-columns: 1fr 17.5rem;
  gap: 4rem;
  align-items: center;
}

.about-personal__photo {
  width: 17.5rem;
  height: 25rem;
  object-fit: cover;
  object-position: center 80%;
  border: 1px solid var(--beige-500);
}

/* ══════════════════════════════════════
   TABLET (max 1230px)
══════════════════════════════════════ */

@media (max-width: 1230px) {

  /* Padding shrinks from 2rem at 1230px → 1rem at 768px */
  .nav-wrapper,
  .hero-wrapper,
  .work-wrapper,
  .cta__wrapper,
  .footer-wrapper,
  .case-wrapper,
  .about-hero__wrapper,
  .about-worlds__wrapper,
  .about-personal__wrapper {
    padding: 0 clamp(1rem, calc(-18.6px + 4.11vw), 2rem);
  }

  /* case-hero has padding-top: keep it */
  .case-hero__wrapper {
    padding: 0 clamp(1rem, calc(-18.6px + 4.11vw), 2rem);
    padding-top: 2rem;
  }

}

/* ══════════════════════════════════════
   MOBILE (max 768px)
══════════════════════════════════════ */

@media (max-width: 768px) {

  /* Prevent the page from scrolling horizontally */
  body {
    overflow-x: hidden;
  }

  /* All text breaks rather than overflowing */
  h1, h2, h3, h4, p, a, li, span, td, th {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Scale font vars down so words fit on narrow screens */
  :root {
    --fs-hero: 2.5rem;
    --fs-hero-italic: 3rem;
    --fs-title: 1.5rem;
  }

  /* Wrappers */
  .nav-wrapper,
  .hero-wrapper,
  .work-wrapper,
  .cta__wrapper,
  .footer-wrapper,
  .case-wrapper,
  .about-hero__wrapper,
  .about-worlds__wrapper,
  .about-personal__wrapper {
    padding: 0 2rem;
  }

  .case-hero__wrapper {
    padding: 0 2rem;
    padding-top: 1.5rem;
  }

  /* Hero: slightly shorter on mobile */
  .hero {
    min-height: 85dvh;
  }

  .hero-left {
    text-align: center;
  }

  /* Allow hero text to wrap so it fits narrow screens */
  .hero-title__line,
  .hero-title__italic {
    white-space: normal;
  }

  .hero-right {
    display: none;
  }

  /* Work grid: single column, cards constrained to track width */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .work-card {
    min-width: 0;
  }

  .work-card__title {
    white-space: normal;
  }

  /* Case study hero: dissolve grid so children can be reordered */
  .case-hero__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 100vw;
    overflow: hidden;
  }

  .case-hero__grid {
    display: contents;
  }

  .case-hero__breadcrumb {
    order: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .case-hero__left {
    order: 1;
    min-width: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .case-hero__title {
    font-size: 1.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
  }

  .case-hero__description {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  .case-hero__carousel-wrapper {
    order: 2;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Hide the arrow on mobile — users swipe */
  .case-hero__carousel-arrow {
    display: none;
  }

  .case-hero__meta {
    order: 3;
    min-width: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .case-hero__meta-item {
    align-items: flex-start;
  }

  /* Show the mobile readtime (before title), hide the one inside meta */
  .case-hero__readtime--mobile {
    display: inline-block;
    margin-bottom: 1.5rem;
  }

  .case-hero__meta > .case-hero__readtime {
    display: none;
  }

  .case-hero__readtime {
    margin-bottom: 0;
    white-space: normal;
  }

  /* Case study body: prevent long words from overflowing */
  .case-wrapper {
    min-width: 0;
  }

  .case-content,
  .case-title,
  .case-label {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .case-image {
    width: 100%;
    height: auto;
  }

  .case-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .footer--minimal .footer-wrapper {
  flex-wrap: wrap;
  gap: 0.75rem;
  }

  .footer--minimal .footer-minimal__links {
  flex-wrap: wrap;
  gap: 1rem;
  } 

  /* About: all sections collapse to one column */
  .about-hero__wrapper,
  .about-worlds__content,
  .about-personal__content {
    grid-template-columns: 1fr;
  }

  /* About photos: full-width horizontal; hide cat + personal pictures */
  .about-hero__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .about-worlds__photo,
  .about-personal__photo {
    display: none;
  }

  /* Resume link stacks above the title on mobile */
  .about-worlds__header {
    flex-direction: column-reverse;
    gap: 1rem;
  }

  /* Footer: nav+contact on one line, copyright on its own line */
  .footer {
    padding: 1.5rem 0 1rem;
  }

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

  /* Dissolve footer-brand; place nav+contact row 1, copyright row 2 */
  .footer-brand {
    display: contents;
  }

  .footer-title,
  .footer-subtitle {
    display: none;
  }

  .footer-nav {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }

  .footer-contact {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }

  .footer-copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Nav: logo left, burger right */
  .nav-wrapper {
    justify-content: space-between;
  }

  .nav-links,
  .nav-right {
    display: none;
  }

  .nav-logo {
    display: flex;
  }

  .nav-burger {
    display: flex;
  }

  /* ── Hamburger open state ── */
  nav.nav--open {
    height: 100dvh;
    background-color: var(--primary) !important;
  }

  /* Column layout, content starts below the nav-height "top bar" */
  nav.nav--open .nav-wrapper {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    gap: 2rem;
    position: relative;
  }

  nav.nav--open .nav-logo {
  position: absolute;
  top: 0;
  left: 2rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

  /* X button pinned to the top-right corner, same height as the top bar */
  nav.nav--open .nav-burger {
    position: absolute;
    top: 0;
    right: 2rem;
    height: var(--nav-height);
    align-items: center;
    margin-left: 0;
  }

  nav.nav--open ~ * #cs-progress-pct,
nav.nav--open #cs-progress-pct {
  opacity: 0 !important;
}

  /* Links stacked vertically with large text */
  nav.nav--open .nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-top: var(--nav-height);
  }

  nav.nav--open .nav-links a {
    font-size: 1.5rem;
  }

  /* Lang + Email below links */
  nav.nav--open .nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    border-top: 1px solid rgba(232, 224, 204, 0.25);
    padding-top: 1.5rem;
    margin-top: 1rem;
    width: 100%;
  }

  nav.nav--open .nav-cta {
    display: inline-flex;
    font-size: 1.5rem;
  }

  nav.nav--open .nav-lang {
    font-size: 1.5rem;
  }

  /* Burger → X */
  nav.nav--open .nav-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  nav.nav--open .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  nav.nav--open .nav-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

}