:root {
  --ink:#111310;
  --paper:#f5f4ef;
  --white:#fff;
  --mint:#7beec7;
  --muted:#6f746f;
  --line:rgba(17,19,16,.16);
  --sans:'DM Sans',sans-serif;
  --display:'Space Grotesk',sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6
}

body.menu-open {
  overflow:hidden
}

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

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

button {
  font:inherit
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.site-header {
  height:96px;
  padding:0 clamp(24px,5vw,76px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper);
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  font-family:'DM Sans', sans-serif;
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
}



.brand img {
  width:42px;
  height:42px;
  object-fit:contain
}

.site-menu {
  display:flex;
  gap:35px;
  align-items:center
}

.site-menu a,.back-link {
  font-size:.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  position:relative
}

.site-menu a:after {
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:2px;
  background:var(--mint);
  transition:.25s
}

.site-menu a:hover:after,.site-menu a[aria-current]:after {
  right:0
}

.menu-toggle {
  display:none;
  border:0;
  background:none;
  padding:8px
}

.menu-toggle span {
  display:block;
  width:27px;
  height:2px;
  background:var(--ink);
  margin:5px
}

.hero {
  min-height:calc(100vh - 96px);
  position:relative;
  display:grid;
  align-items:end;
  overflow:hidden;
  color:#fff
}

.hero-media,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-shade {
  background:linear-gradient(90deg,rgba(5,9,7,.15),rgba(5,9,7,.12) 50%)
}

.hero-content {
  position:relative;
  z-index:2;
  padding:8vw clamp(24px,8vw,126px);
  max-width:1000px
}

.eyebrow,.section-index {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.73rem;
  font-weight:600
}

.hero .eyebrow {
  color:var(--mint)
}

.hero h1,.portfolio-head h1,.project-hero h1 {
  font:700 clamp(4.4rem,11vw,10.8rem)/.79 var(--display);
  letter-spacing:-.075em;
  text-transform:uppercase;
  margin:.22em 0
}

.hero h1 span,.portfolio-head h1 span,.project-hero h1 span {
  color:var(--mint)
}

.hero-intro {
  max-width:530px;
  font-size:clamp(1.05rem,2vw,1.35rem)
}

.hero-actions {
  display:flex;
  gap:13px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:35px
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:0 22px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  border:1px solid #fff;
  transition:.25s
}

.button-primary {
  background:var(--mint);
  border-color:var(--mint);
  color:var(--ink)
}

.button:hover {
  transform:translateY(-3px)
}

.button-ghost:hover {
  background:#fff;
  color:var(--ink)
}

.text-link {
  margin-left:12px;
  border-bottom:1px solid currentColor;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em
}

.scroll-cue {
  position:absolute;
  right:5vw;
  bottom:45px;
  z-index:2;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em
}

.scroll-cue span {
  margin-left:10px;
  color:var(--mint)
}

.section {
  padding:clamp(85px,11vw,165px) clamp(24px,8vw,126px)
}

.intro-grid {
  display:grid;
  grid-template-columns:minmax(260px,1fr) 1fr;
  gap:10vw
}

.section-index {
  color:var(--muted);
  margin:0 0 34px
}

.intro-grid h2,.vision h2,.manifesto h2,.project-note h2 {
  font:600 clamp(2.5rem,5vw,5.3rem)/.98 var(--display);
  letter-spacing:-.055em;
  margin:0
}

.prose {
  max-width:600px;
  padding-top:48px
}

.prose p {
  font-size:1.08rem;
  margin:0 0 24px
}

.manifesto {
  min-height:min(72vw,820px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(500px,.95fr);
  align-items:center;
  background:var(--paper);
  padding:clamp(30px,6vw,90px);
  position:relative;
  overflow:hidden
}

.manifesto-carousel {
  width:100%;
  height:min(64vw,720px);
  min-height:560px;
  position:relative;
  overflow:hidden;
  background:#ddd
}

.manifesto-slides,
.manifesto-slides img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

.manifesto-slides img {
  object-fit:cover;
  opacity:0;
  transform:scale(1.025);
  transition:opacity .7s ease,transform 1.2s ease
}

.manifesto-slides img.is-active {
  opacity:1;
  transform:scale(1)
}

.carousel-controls {
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:15px;
  padding:8px;
  background:rgba(245,244,239,.92);
  color:var(--ink)
}

.carousel-controls button {
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:1.2rem;
  transition:.2s
}

.carousel-controls button:hover {
  background:var(--mint)
}

.carousel-count {
  min-width:52px;
  text-align:center;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em
}

.manifesto-card {
  width:calc(100% + 3vw);
  max-width:760px;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--mint);
  color:var(--ink);
  padding:clamp(45px,5vw,82px);
  margin-left:-5vw;
  z-index:2;
  position:relative;
  box-shadow:0 28px 70px rgba(17,19,16,.18)
}

.manifesto-card h2 {
  font-size:clamp(2.7rem,4.3vw,5rem);
  overflow-wrap:normal;
  word-break:normal
}

.manifesto-card .section-index {
  color:var(--ink)
}

.manifesto-card p:last-child {
  font-size:1.05rem;
  max-width:500px
}

.vision {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:7vw;
  align-items:start
}

.vision-copy p:last-child {
  max-width:540px
}

.showreel-section {
  padding:clamp(75px,9vw,135px) clamp(24px,5vw,76px);
  background:var(--ink);
  color:#fff;
  scroll-margin-top:40px
}

.showreel-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:clamp(35px,5vw,70px)
}

.showreel-heading .section-index {
  color:var(--mint)
}

.showreel-heading h2 {
  margin:0;
  color:#fff;
  font:600 clamp(3rem,7vw,7rem)/.9 var(--display);
  letter-spacing:-.06em
}

.showreel-heading h2 span {
  color:var(--mint)
}

.showreel-heading>a {
  flex:0 0 auto;
  margin-bottom:9px;
  padding-bottom:4px;
  border-bottom:1px solid var(--mint);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em
}

.showreel-heading>a:hover {
  color:var(--mint)
}

.showreel-video {
  width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.35)
}

.video-frame {
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden
}

.video-frame iframe {
  width:100%;
  height:100%;
  border:0
}

.next-panel {
  background:var(--mint);
  padding:clamp(58px,8vw,115px) clamp(24px,8vw,126px)
}

.next-panel p {
  margin:0 0 12px
}

.next-panel a {
  font:600 clamp(2.6rem,7vw,7rem)/1 var(--display);
  letter-spacing:-.055em
}

.next-panel a span {
  display:inline-block;
  transition:.25s
}

.next-panel a:hover span {
  transform:translate(10px,-10px)
}

.site-footer {
  min-height:110px;
  padding:35px clamp(24px,5vw,76px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em
}

.site-footer div {
  display:flex;
  gap:24px
}

.site-footer a:hover {
  color:#3a9b7e
}

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:.8s ease
}

.reveal.is-visible {
  opacity:1;
  transform:none
}

.portfolio-page {
  padding:clamp(70px,9vw,135px) clamp(24px,5vw,76px)
}

.portfolio-head {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:50px
}

.portfolio-head .eyebrow {
  grid-column:1/-1;
  color:var(--muted)
}

.portfolio-head h1 {
  font-size:clamp(4.7rem,11vw,10rem);
  margin:.15em 0 0
}

.portfolio-head>p:last-child {
  max-width:280px;
  margin:0 0 12px;
  color:var(--muted)
}

.filters {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:45px 0 55px
}

.filters button {
  border:1px solid var(--line);
  background:transparent;
  padding:12px 18px;
  cursor:pointer;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.09em;
  transition:.25s
}

.filters button:hover,.filters button.active {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}

.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:65px 24px
}

.project-card a {
  display:block
}

.project-image {
  position:relative;
  overflow:hidden;
  background:#ddd;
  aspect-ratio:4/3
}

.project-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)
}

.project-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,14,11,.35);
  opacity:0;
  transition:.3s
}

.project-image span {
  position:absolute;
  left:25px;
  bottom:22px;
  z-index:2;
  color:#fff;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.1em;
  opacity:0;
  transform:translateY(8px);
  transition:.3s
}

.project-card a:hover img {
  transform:scale(1.035)
}

.project-card a:hover .project-image:after,.project-card a:hover .project-image span {
  opacity:1;
  transform:none
}

.project-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline;
  border-top:1px solid var(--ink);
  padding-top:13px;
  margin-top:15px
}

.project-meta h2 {
  font:600 clamp(1.15rem,2vw,1.75rem)/1.1 var(--display);
  margin:0
}

.project-meta p {
  margin:0;
  color:var(--muted);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em
}

.gallery-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.gallery-card {
  border:0;
  padding:0;
  background:#ddd;
  cursor:zoom-in;
  aspect-ratio:1;
  overflow:hidden
}

.gallery-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s
}

.gallery-card:hover img {
  transform:scale(1.04);
  filter:brightness(.82)
}

.lightbox {
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  border:0;
  padding:4vw;
  background:rgba(9,11,9,.96);
  color:#fff
}

.lightbox[open] {
  display:grid;
  place-items:center
}

.lightbox::backdrop {
  background:transparent
}

.lightbox img {
  max-height:82vh;
  max-width:88vw;
  object-fit:contain
}

.lightbox p {
  position:fixed;
  left:30px;
  bottom:15px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.7rem
}

.lightbox button {
  position:fixed;
  border:0;
  background:none;
  color:#fff;
  cursor:pointer;
  font-size:2rem
}

.lightbox-close {
  right:28px;
  top:18px
}

.lightbox-prev {
  left:25px;
  top:50%
}

.lightbox-next {
  right:25px;
  top:50%
}

.project-page {
  padding:0 clamp(24px,5vw,76px)
}

.project-hero {
  padding:clamp(75px,10vw,150px) 0 75px
}

.project-hero .eyebrow {
  color:var(--muted)
}

.project-hero h1 {
  font-size:clamp(4rem,10vw,9.5rem)
}

.project-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  margin:75px 0 0;
  margin-left:33%
}

.project-summary>p {
  font-size:1.15rem;
  max-width:650px
}

.project-summary dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}

.project-summary dt {
  text-transform:uppercase;
  font-size:.69rem;
  letter-spacing:.13em;
  color:var(--muted);
  margin-bottom:8px
}

.project-summary dd {
  margin:0
}

.project-cover {
  margin:0
}

.project-cover img {
  width:100%;
  max-height:82vh;
  object-fit:cover
}

.project-media {
  padding:clamp(70px,9vw,135px) 6vw
}

.project-note {
  display:grid;
  grid-template-columns:.35fr 1fr .65fr;
  gap:5vw;
  border-top:1px solid var(--line);
  padding:clamp(70px,9vw,130px) 0
}

.project-note h2 {
  font-size:clamp(2.2rem,4.4vw,4.8rem)
}

.project-note>p:last-child {
  padding-top:14px
}

.project-nav {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  padding:40px 0 70px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.73rem
}

.project-nav a:last-child {
  text-align:right
}

.project-nav a:hover {
  color:#319979
}

@media(max-width:780px) {
  .site-header {
    height:78px
  }



  .menu-toggle {
    display:block;
    position:relative;
    z-index:22
  }

  .site-menu {
    display:none;
    position:fixed;
    inset:0;
    background:var(--mint);
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding:18vw 10vw
  }

  .menu-open .site-menu {
    display:flex
  }

  .site-menu a {
    font:600 12vw/1 var(--display);
    letter-spacing:-.05em;
    text-transform:none
  }

  .menu-open .menu-toggle span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
  }

  .menu-open .menu-toggle span:nth-child(2) {
    opacity:0
  }

  .menu-open .menu-toggle span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
  }

  .hero {
    min-height:calc(100svh - 78px)
  }

  .hero h1 {
    font-size:21vw
  }

  .hero-actions {
    align-items:stretch;
    flex-direction:column
  }

  .text-link {
    margin:10px 0;
    width:max-content
  }

  .scroll-cue {
    display:none
  }

  .intro-grid,.manifesto,.vision,.portfolio-head,.project-summary,.project-note {
    grid-template-columns:1fr
  }

  .prose {
    padding-top:10px
  }

  .manifesto {
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    padding:24px;
  }

  .manifesto-carousel {
    height:65vh;
    min-height:480px
  }

  .manifesto-card {
    width:100%;
    max-width:none;
    min-height:auto;
    margin:-55px 0 0;
    padding:35px
  }

  .manifesto-card h2 {
    font-size:clamp(2.5rem,12vw,4.5rem)
  }

  .vision {
    gap:45px
  }

  .showreel-heading {
    align-items:flex-start;
    flex-direction:column
  }

  .showreel-heading h2 {
    font-size:14vw
  }

  .site-footer {
    align-items:flex-start;
    gap:25px;
    flex-direction:column
  }

  .site-footer div {
    flex-wrap:wrap
  }

  .portfolio-head>p:last-child {
    margin-top:22px
  }

  .filters {
    gap:7px
  }

  .filters button {
    padding:10px 12px
  }

  .project-grid {
    grid-template-columns:1fr;
    gap:45px
  }

  .gallery-grid {
    grid-template-columns:repeat(2,1fr);
    gap:7px
  }

  .project-summary {
    margin-left:0;
    margin-top:40px
  }

  .project-summary dl {
    grid-template-columns:1fr 1fr
  }

  .project-media {
    padding-left:0;
    padding-right:0
  }

  .project-note {
    gap:24px
  }

  .project-nav {
    gap:12px
  }

  .project-nav a:nth-child(2) {
    display:none
  }

  .lightbox-prev,.lightbox-next {
    top:auto;
    bottom:15px
  }

}

/* Ma vision : texte à gauche, vidéo à droite */
.vision {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:clamp(45px,7vw,110px)
}

.vision .vision-copy {
  grid-column:auto;
  min-width:0
}

.vision>.video-frame {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  align-self:center;
  background:#111;
  box-shadow:0 24px 65px rgba(17,19,16,.14)
}

.vision>.video-frame iframe {
  display:block;
  width:100%;
  height:100%;
  border:0
}

@media(max-width:900px) {
  .vision {
    grid-template-columns:1fr;
    gap:45px
  }

  .vision>.video-frame {
    max-width:none
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }

  .reveal {
    opacity:1;
    transform:none
  }

}

/* Contact */
.contact-page {
  background:var(--ink);
  color:#fff
}

.contact-stage {
  min-height:calc(100svh - 96px);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);
  padding:clamp(25px,5vw,76px);
  gap:clamp(35px,7vw,110px);
  align-items:stretch
}

.contact-title {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5vw 0
}

.contact-title .eyebrow {
  color:var(--mint)
}

.contact-title h1 {
  font:700 clamp(4rem,8.2vw,8.8rem)/.95 var(--display);
  letter-spacing:-.075em;
  text-transform:uppercase;
  margin:.25em 0 .28em
}

.contact-title h1 span {
  color:var(--mint)
}

.contact-lead {
  font-size:clamp(1rem,1.6vw,1.25rem);
  max-width:590px;
  color:#c9ccc8
}

.contact-panel {
  background:var(--mint);
  color:var(--ink);
  padding:clamp(30px,4.5vw,70px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden
}

.contact-panel:before {
  content:'';
  position:absolute;
  width:230px;
  height:230px;
  border:1px solid rgba(17,19,16,.25);
  border-radius:50%;
  right:-90px;
  top:85px
}

.contact-panel-number {
  position:absolute;
  top:24px;
  left:30px;
  font:600 1rem var(--display)
}

.contact-panel-kicker {
  position:absolute;
  top:25px;
  right:30px;
  margin:0;
  max-width:150px;
  text-align:right;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em
}

.contact-method {
  padding:25px 0;
  border-top:1px solid rgba(17,19,16,.28);
  position:relative
}

.contact-label {
  display:block;
  font-size:.66rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:9px
}

.contact-value {
  font:600 clamp(1.15rem,2.1vw,2rem)/1.15 var(--display);
  letter-spacing:-.04em;
  overflow-wrap:anywhere
}

.copy-button {
  display:inline-flex;
  margin-top:15px;
  padding:8px 12px;
  border:1px solid rgba(17,19,16,.4);
  background:transparent;
  cursor:pointer;
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  transition:.2s
}

.copy-button:hover {
  background:var(--ink);
  color:#fff
}

.contact-socials {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid rgba(17,19,16,.28)
}

.contact-socials a {
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor
}

.contact-socials a:hover {
  opacity:.55
}

.contact-project-link {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(60px,8vw,120px) clamp(24px,8vw,126px);
  font:600 clamp(3rem,8vw,8rem)/.82 var(--display);
  letter-spacing:-.06em
}

.contact-project-link span {
  font:600 .7rem var(--sans);
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:8px
}

.contact-project-link b {
  font-weight:500;
  color:#399d7d;
  transition:.25s
}

.contact-project-link:hover b {
  transform:translateX(12px)
}

.contact-page+.site-footer {
  background:var(--paper);
  color:var(--ink)
}

@media(max-width:780px) {
  .contact-stage {
    min-height:auto;
    grid-template-columns:1fr;
    padding:60px 24px 24px;
    gap:45px
  }

  .contact-title h1 {
    font-size:18vw
  }

  .contact-panel {
    min-height:560px;
    padding:32px 25px
  }

  .contact-panel-kicker {
    right:25px
  }

  .contact-project-link {
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
    font-size:17vw
  }

  .contact-project-link span {
    order:2
  }

}

.project-summary dd {
  font-size: .80rem;
  line-height: 1.55;
}