@charset "UTF-8";
@import url("https://use.typekit.net/vxl4kul.css");

/* ============================================================
   DESIGN TOKENS — Fluid, modern, Awwwards-grade
   ============================================================ */
:root {
  /* Palette */
  --color-60: #FFFAFB;
  --color-30: #2A2A2A;
  --color-10: #F5A0C7;
  --color-10-muted: rgba(245, 160, 199, 0.12);

  --bg-color:     var(--color-60);
  --text-color:   var(--color-30);
  --accent-color: var(--color-10);

  /* ── Fluid typography (clamp: mobile → desktop) ──────────── */
  /* Formula: clamp(min, preferred_vw, max) */
  --text-xs:  clamp(13px, 1vw + 9px,   15px);
  --text-s:   clamp(16px, 1vw + 12px,  18px);
  --text-m:   clamp(20px, 1.4vw + 14px, 21px);
  --text-l:   clamp(26px, 2vw + 16px,  32px);
  --text-xl:  clamp(32px, 3vw + 16px,  44px);
  --text-xxl: clamp(40px, 4vw + 18px,  60px);
  --text-display: clamp(52px, 7vw + 12px, 96px);

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 35px;

  /* ── Letter spacing ──────────────────────────────────────── */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.1em;

  /* ── Families ─────────────────────────────────────────────── */
  --text-headings: "neue-haas-grotesk-display", sans-serif;
  --text-body:     "neue-haas-grotesk-display", sans-serif;

  /* ── Fluid spacing (clamp) ───────────────────────────────── */
  --space-xxs:  clamp(3px,  0.3vw,  5px);
  --space-xs:   clamp(8px,  1vw,    13px);
  --space-s:    clamp(13px, 1.6vw,  22px);
  --space-m:    clamp(22px, 2.5vw,  37px);
  --space-l:    clamp(34px, 3.8vw,  54px);
  --space-xl:   clamp(47px, 5vw,    74px);
  --space-xxl:  clamp(60px, 7.5vw,  140px);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1440px;
  --page-gutter:   clamp(20px, 5vw, 200px);
  --col-gap:       clamp(40px, 5vw, 120px);

  /* ── Details ─────────────────────────────────────────────── */
  --radius:  6px;
  --border:  solid var(--text-color) 1px;

  /* ── Breakpoints (for reference in JS) ───────────────────── */
  --breakpoint-medium: 700px;
  --breakpoint-large:  1000px;
  --breakpoint-huge:   1400px;

  /* Legacy aliases (backward compat) */
  --spacer-xxs: var(--space-xxs);
  --spacer-xs:  var(--space-xs);
  --spacer-s:   var(--space-s);
  --spacer-m:   var(--space-m);
  --spacer-l:   var(--space-l);
  --spacer-xl:  var(--space-xl);
  --spacer-xxl: var(--space-xxl);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul  { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--text-body);
  font-size: var(--text-m);
  line-height: var(--lh-relaxed);
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: hidden;
}

#smooth-wrapper {
  &.home {
    /* padding: var(--space-l); */
    padding: var(--space-l) 0;
  }

  &.single {
    /* padding: var(--space-l); */
    padding: var(--space-l);
  }

  &.work {
    padding-top: var(--space-xxl);
  }
}


/* ── Headings ─────────────────────────────────────────────── */
h1 {
  font-family: var(--text-headings);
  font-weight: 600;
  font-size: var(--text-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-family: var(--text-headings);
  font-weight: 500;
  font-size: var(--text-l);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-weight: 400;
  font-size: var(--text-m);
  line-height: var(--lh-normal);
}

p {
  font-size: var(--text-m);
  line-height: var(--lh-relaxed);
}

strong {
  font-weight: 500;
}

/* ── Buttons ──────────────────────────────────────────────── */
button {
  border: none;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
}

#closeMenuButton {
  background-color: transparent;
  position: fixed;
  top: 30px;
  right: 30px;
  display: none;
}

/* ── To-top button ────────────────────────────────────────── */
.to-top-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background-color: var(--accent-color);
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.to-top-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(245, 160, 199, 0.4);
}

/* ── Links ────────────────────────────────────────────────── */
a {
  text-decoration: none;
  color: var(--text-color);
}

.link {
  font-weight: 500;
  letter-spacing: var(--ls-normal);
}

/* Animated link — letter-by-letter slide up */
.link--animated {
  line-height: var(--text-l);
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.link--animated:hover .letter,
.link--animated.play .letter {
  transform: translateY(-100%);
}
.link--animated .block {
  transform: translateY(0%);
}
.link--animated .block:last-child {
  color: var(--accent-color);
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
}
.link--animated .letter {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.024, 1);
}

/* Auto-generate staggered delays (1–33) */
.letter:nth-child(1)  { transition-delay: 0s; }
.letter:nth-child(2)  { transition-delay: 0.03s; }
.letter:nth-child(3)  { transition-delay: 0.06s; }
.letter:nth-child(4)  { transition-delay: 0.09s; }
.letter:nth-child(5)  { transition-delay: 0.12s; }
.letter:nth-child(6)  { transition-delay: 0.15s; }
.letter:nth-child(7)  { transition-delay: 0.18s; }
.letter:nth-child(8)  { transition-delay: 0.21s; }
.letter:nth-child(9)  { transition-delay: 0.24s; }
.letter:nth-child(10) { transition-delay: 0.27s; }
.letter:nth-child(11) { transition-delay: 0.30s; }
.letter:nth-child(12) { transition-delay: 0.33s; }
.letter:nth-child(13) { transition-delay: 0.36s; }
.letter:nth-child(14) { transition-delay: 0.39s; }
.letter:nth-child(15) { transition-delay: 0.42s; }
.letter:nth-child(16) { transition-delay: 0.45s; }
.letter:nth-child(17) { transition-delay: 0.48s; }
.letter:nth-child(18) { transition-delay: 0.51s; }
.letter:nth-child(19) { transition-delay: 0.54s; }
.letter:nth-child(20) { transition-delay: 0.57s; }
.letter:nth-child(21) { transition-delay: 1.00s; }
.letter:nth-child(22) { transition-delay: 1.03s; }
.letter:nth-child(23) { transition-delay: 1.06s; }
.letter:nth-child(24) { transition-delay: 1.09s; }
.letter:nth-child(25) { transition-delay: 1.12s; }
.letter:nth-child(26) { transition-delay: 1.15s; }
.letter:nth-child(27) { transition-delay: 1.18s; }
.letter:nth-child(28) { transition-delay: 1.21s; }
.letter:nth-child(29) { transition-delay: 1.24s; }
.letter:nth-child(30) { transition-delay: 1.27s; }
.letter:nth-child(31) { transition-delay: 1.30s; }
.letter:nth-child(32) { transition-delay: 1.33s; }
.letter:nth-child(33) { transition-delay: 1.37s; }

/* ============================================================
   NAVIGATION — Mobile
   ============================================================ */
.desktop-header { display: none; }

.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0; left: 0; right: 0;
  background-color: var(--bg-color);
  padding: var(--space-s) var(--space-m);
  z-index: 99;
}

.mobile-menu {
  height: 100vh;
  width: 0;
  background-color: rgba(255, 250, 251, 0.97);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  position: fixed;
  top: 0; left: 0;
  overflow-x: hidden;
  transition: width 0.5s cubic-bezier(0.76, 0, 0.024, 1);
  z-index: 999;
}

.mobile-navigation__list__item {
  text-align: center;
  margin: var(--space-s) 0;
}

.mobile-menu__footer__list__item {
  margin: var(--space-s) 0;
  text-align: center;
}
.mobile-menu__footer__list__item:first-of-type { margin-top: 0; }
.mobile-menu__footer__list__item:last-of-type  { margin-bottom: 0; }

  .brand-outer {
    width: 100px;
    height: 100px;
    background: radial-gradient(89.08% 84.62% at 16.54% 78.46%,
      #f5a0c7 0%, #f7b8d5 42%, #facfe3 80%);
    border-radius: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
  }

  svg.brand-svg {
    --brand-width: 60%;
    width: var(--brand-width);
    max-height: var(--brand-width);
    height: var(--brand-width);
    will-change: transform;
    transition: height 250ms ease, transform 250ms ease;
  }
/* ============================================================
   NAVIGATION — Desktop
   ============================================================ */
@media screen and (min-width: 700px) {
  .mobile-menu   { display: none; }
  .mobile-header { display: none; }

  .desktop-header {
    display: block;
    font-size: var(--text-l);
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 99;
    background-color: var(--bg-color);
    transition: padding 250ms ease, box-shadow 250ms ease;
  }

  .desktop-header a {
    font-weight: 300;
    font-family: var(--text-body);
  }

  .desktop-header__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    transition: padding 250ms ease;
  }

  .desktop-header__nav__list {
    display: flex;
    gap: 15px;
  }

  /* Brand logo */
  .brand {
    margin-left: -100px;
    perspective: 650px;
  }

  .brand-outer {
    width: 100px;
    height: 100px;
    background: radial-gradient(89.08% 84.62% at 16.54% 78.46%,
      #f5a0c7 0%, #f7b8d5 42%, #facfe3 80%);
    border-radius: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
  }

  svg.brand-svg {
    --brand-width: 60%;
    width: var(--brand-width);
    max-height: var(--brand-width);
    height: var(--brand-width);
    will-change: transform;
    transition: height 250ms ease, transform 250ms ease;
  }
}

/* ============================================================
   INTRO — Homepage
   ============================================================ */
.intro {
  margin: 0 var(--space-l);
  /* background-color: red; */
}

.intro h1 {
  color: var(--accent-color);
  font-size: var(--text-display);
  letter-spacing: var(--ls-tight);
  font-size: var(--text-xxl);
}

.intro h2 {
  margin-top: 16px;
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
}

.intro p {
  margin-top: var(--space-m);
  max-width: 1600px;
  font-size: var(--text-m);
  line-height: var(--lh-relaxed);
}

@media screen and (min-width: 1600px) {
  .intro {
    margin: 0 250px;
    margin-top: var(--space-l);
    
  }
}

/* ============================================================
   WORK GRID — Homepage
   ============================================================ */
.work {
  margin: var(--space-m) 0;
}

.work__list {
  display: grid;
  gap: 10px;
}

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

.work__list__item__overlay {
  display: none;
}

@media screen and (min-width: 700px) {
  .work__list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .work__list__item {
    position: relative;
    overflow: hidden;
  }

  .work__list__item img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .work__list__item:hover img {
    transform: scale(1.04);
  }

  .work__list__item__overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Project overlay colors */
  .work__list__item__overlay.hoppen   { background-color: rgba(58, 37, 124, 1);  color: white; }
  .work__list__item__overlay.aeros    { background-color: rgba(248, 170, 10, 1);  color: white; }
  .work__list__item__overlay.camelia  { background-color: rgba(229, 127, 172, 1); color: white; }
  .work__list__item__overlay.amadeo   { background-color: rgba(182, 207, 209, 1); color: white; }
  .work__list__item__overlay.little   { background-color: rgba(105, 102, 70, 1);  color: white; }
  .work__list__item__overlay.axxin    { background-color: rgba(32, 38, 70, 1);    color: white; }
  .work__list__item__overlay.washdogz { background-color: rgba(162, 73, 217, 1);  color: white; }

  .work__list__item__overlay h3 {
    font-size: var(--text-xl);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
  }

  .work__list__item:hover .work__list__item__overlay {
    opacity: 1;
  }
}

/* ============================================================
   SINGLE PROJECT PAGE
   ============================================================ */

/* Page title */
.single h1 {
  /* margin-top: 130px; */
  margin-left: var(--space-xs);
  font-size: var(--text-xxl);
  letter-spacing: var(--ls-tight);
}

@media screen and (min-width: 700px) {
  .single h1 {
    width: 80%;
    margin-top: var(--space-l);
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── single-details: section wrapper ─────────────────────── */
.single-details {
  margin: var(--space-m) var(--space-xs);
}

.single-details h2 {
  margin-bottom: var(--space-s);
}

.single-details > p {
  max-width: 72ch;
  margin-bottom: var(--space-xs);
  display: block;
}

.single-details > strong {
  max-width: 100%;
}

.single-details > strong {
  font-weight: 500;
  font-size: var(--text-m);
  line-height: var(--lh-normal);
  color: var(--text-color);
  display: block;
  margin: var(--space-m) 0 var(--space-xs);
}

/* ── single-details--1col: full-width section ────────────── */
.single-details--1col {
  margin: var(--space-m) var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.single-details--1col h2 {
  margin-bottom: 0;
}

.single-details--1col > p {
  max-width: 100%;
  line-height: var(--lh-relaxed);
}

@media screen and (min-width: 700px) {
  .single-details {
    width: 80%;
    margin-top: 0;
    margin-bottom: var(--space-l);
    margin-left: auto;
    margin-right: auto;
  }

  .single-details--1col {
    width: 80%;
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-s);
  }
}

@media screen and (max-width: 700px) {
      .single-details__item {
        min-width: 0;
      }

}

@media screen and (min-width: 701px) and (max-width: 1599px) {
  /* ── single-details__item: the image+text pair ───────────── */
/* Mobile: stack vertically */
  .single-details__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-s);
    margin: var(--space-s) 0;
    /* min-width: 590px; */
  }

  .single-details__item img {
    width: 100%;
    /* min-width: 590px; */
    height: auto;
    object-fit: contain;
  }

  /* .hero {
    display: block;
    width: 100vw;
    max-width: 100vw;

    height: auto;
    object-fit: cover;
  } */
}

/* ── single-details__item: the image+text pair ───────────── */
/* Mobile: stack vertically */
.single-details__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin: var(--space-s) 0;

}

.single-details__item img {
  width: 100%;
  /* min-width: 590px; */
  height: auto;
  object-fit: contain;
}

/* Desktop: side-by-side, tops aligned, colonnes égales */
@media screen and (min-width: 1600px) {
  .single-details__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--col-gap);
    align-items: stretch;
    margin: var(--space-m) 0;
  }

  .single-details__item img {
    width: 100%;
    height: auto;

    display: block;
  }

  .single-details__item__content--centered {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-xs);
  }

  .single-details__item .link {
    margin-top: var(--space-s);
  }

  .single-details__item li {
    margin: 3px 0;
    line-height: var(--lh-normal);
  }
}

/* ── Content cell (text) ──────────────────────────────────── */
.single-details__item__content--centered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.single-details__item__content--centered > p + p {
  /* No extra margin needed — gap handles it */
}

/* ── Lists ────────────────────────────────────────────────── */
.single-details__item__listed {
  list-style: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.single-details__item__listed li {
  line-height: var(--lh-normal);
  font-size: var(--text-m);
}

/* ── Separator ────────────────────────────────────────────── */
.separator {
  width: 40px;
  height: 2px;
  background-color: transparent;
  border-radius: 2px;
  margin: var(--space-xxs) 0;
  flex-shrink: 0;
}

/* ── Hero image (full-bleed) ─────────────────────────────── */
img.hero {
  display: block;
  width: 100%;
  max-width: 100vw;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width: 1600px) {
  /* img.hero {
    margin-top: var(--space-l);
    width: 100vw;
    max-width: 100vw;

  } */
}

/* ── Single navigation (in-page anchors) ─────────────────── */
.single-navigation {
  margin: var(--space-xs);
}

.single-navigation__list__item {
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  margin: var(--space-xxs) 0;
}

@media screen and (min-width: 700px) {
  .single-navigation {
    width: 80%;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Single gallery ───────────────────────────────────────── */
.single-gallery {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 1fr;
}

.single-gallery img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 700px) {
  .single-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   CASE STUDY PAGE (.cs)
   ============================================================ */
.cs h1 {
  margin-left: var(--space-xs);
  margin-top: 100px;
}

.cs-details {
  margin: var(--space-xs);
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 1fr;
}

.cs-details__item--2col {
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 1fr;
}

.cs-details__item__listed {
  list-style: disc;
  list-style-position: inside;
}

.cs-details__item__listed--nested {
  padding-left: var(--space-s);
}

.cs-details__item__listed--ordered {
  list-style: decimal;
  list-style-position: inside;
}

.cs strong {
  font-weight: 500;
}

@media screen and (min-width: 1600px) {
  .cs h1 {
    margin-left: var(--space-xxl);
  }

  .cs-details {
    margin: var(--space-l) var(--space-xxl);
    gap: var(--space-m);
    

    p {
      max-width: 1600px;
    }
  }

  .cs-details__item--2col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }

  /* .cs-details .hero {
    display: block;
    width: 100vw;
    max-width: 100vw;

  } */
}

/* ============================================================
   SCROLL SMOOTHER / GSAP
   ============================================================ */
@media screen and (min-width: 700px) {
  #smooth-content {
    overflow: visible;
    width: 100%;
    padding: 100px 0;
    /* margin-top: var(--space-xl); */
  }

  .single {
    opacity: 0;
  }
}