:root{
  --blue: #1814b1;
  --teal: #17ce8c;
  --red: #fd3047;
  --yellow: #f7eb2f;
  --bg: #121212;
  --muted: #e4cac1;
  --max-width: 90vW;
}

@font-face {
  font-family: 'syoogbold';
  src: url('../assets/fonts/syoogbold-webfont.woff2') format('woff2'),
       url('../assets/fonts/syoogbold-webfont.woff') format('woff'),
       url('../assets/fonts/syoogbold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}

.container{max-width:var(--max-width);padding:1rem;margin:0 auto;position: relative;}
.container h3.title{font-size: clamp(1rem, 6vW, 4rem );margin: 0;color:var(--muted);}
.site-header{position:absolute;left:0;right:0;top:0;padding:.8rem 0;background:transparent;z-index:6}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--teal);font-weight:800;text-decoration:none;font-size:1.1rem}
.nav-list{list-style:none;margin:0;padding:0}

.site-header .logo{display:inline-block;overflow:hidden;width:120px;height:44px}
.site-header .logo svg{height:44px;width:auto;display:block}
@media(min-width:720px){
  .site-header .logo {
      width: fit-content;
      height: auto;
      position: absolute;
      top: 5.25rem;
  }
  .site-header .logo svg{height:64px}
}

/* Startup transition defaults */
svg path,
svg,
.links a,
.content .tag,
.content .logo {
  transition: opacity 200ms ease-out 100ms, transform 800ms ease-out 170ms, box-shadow 600ms ease-out;
  transform: none;
}

/* Starter state: move logo parts off-screen / hidden */
.starter.logo svg { transform: translateY(0); opacity: 0; }
.starter.logo svg #L1 { transform: translateX(119px); opacity: 0; }
.starter.logo svg #L2 { transform: translateX(-10px); opacity: 0; }
.starter.logo svg #L3 { transform: translateX(-60px); opacity: 0; }
.starter.logo svg #L4 { transform: translateX(-111px); opacity: 0; }
.starter.logo svg #L5 { transform: translateX(-185px); opacity: 0; }

/* When .starter is removed the elements will transition to their natural state */

/* Align nav to top-right (vertical list) similar to screenshot */
.site-header .nav {
    position: absolute;
    right: 1.25rem;
    top: 5.25rem;
    z-index: 8;
}
.site-header .nav-list{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;padding:0;margin:0}
.site-header .nav-list li{list-style:none}
.site-header .nav-list a{color:var(--muted);text-decoration:none;font-weight:700;padding:.12rem .2rem;font-size: clamp(1rem, 5vW, 2rem);line-height: 1.5rem;}
.site-header .nav-list a:hover{color:var(--yellow)}
.site-header .nav-list li:first-child a{color:var(--yellow)}

@media(max-width:719px){
  .site-header .nav{position:static}
  .site-header .nav-list{flex-direction:row;display:flex;gap:.6rem}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-direction:column}
}

.hero{position:relative;min-height:100vh;padding:0;display:flex;align-items:center;background:var(--blue);overflow:hidden;}
.hero-bg{position:absolute;inset:0;background: url('../assets/img/ovbg22_bleu.jpg');background-size:cover;background-position: center 20%;opacity:1;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none;justify-content: center;height: 100vH;background-repeat: no-repeat;will-change:transform;}
.hero-bg img.hero-bg-img{position:absolute;left:0;bottom:0;width:100vw;height:auto;z-index:1;pointer-events:none;mix-blend-mode: lighten;will-change:transform;}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;padding:2rem 1rem}
.hero-left{padding:1rem 0;z-index:2;max-width: 90%;margin-top: 10rem;}
.name, .subtitle{font-family:'syoogbold', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;margin:0;line-height:0.85;}
.name .first{display:block;font-size: clamp(2.6rem,9.5vw,8rem);color:var(--red);letter-spacing:2px}
.name .last{display:block;font-size: clamp(2.6rem,9.5vw,8rem);color:var(--red);letter-spacing:-2px;}
.subtitle{color:var(--teal);margin:.5rem 0;font-size: clamp(1rem, 2.5vW, 1.6rem);line-height: clamp(1rem, 3.5vW, 1.6rem);}
.social{display:flex;gap: 1.6rem;padding:0;margin: 3rem 0 0 0;list-style:none}
.social a{--icon-color: var(--teal);text-decoration:none;display:block;width: 7vW;height:auto;max-width: 3rem;}
.social a:hover{--icon-color: var(--yellow)}
.social-icon{fill:var(--icon-color);transition:fill .25s ease;display:block;width:100%;height:auto}
.malt-logo{display:block;height:min(7vw,3rem);width:auto;}
.hero-right a.maltlink .malt-logo{filter:hue-rotate(50deg);}
.hero-right a.maltlink:hover .malt-logo{filter:hue-rotate(0deg);}

.name .first,
.name .last,
.subtitle,
.social,
.site-header .nav,
.hero-right a.maltlink .malt-logo{opacity:0}

.intro{max-width: 100vW;min-height: 70vH;display: flex;align-items: center;background-color: var(--bg);padding: 0 13%;position:relative;}
.intro p{color:var(--muted);font-size: clamp(2vW,50px,6vW);line-height: clamp(2vW,50px,6vW);letter-spacing: -1px;font-weight: bold;position:relative;z-index:2;}
.intro mark{background:transparent;color:var(--yellow);font-weight:700}

/* Dot Grid Styles */
.dots-wrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:auto;}
.dots-container{grid-column-gap:2em;grid-row-gap:2em;pointer-events:auto;flex-flow:wrap;grid-template-rows:auto;grid-template-columns:1fr;grid-auto-columns:1fr;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;font-size:16px;}
.dot{will-change:transform,background-color;transform-origin:center;background-color:#2a3a8a;border-radius:50%;width:1em;height:1em;position:relative;transform:translate(0);pointer-events:none;}

.stripe{padding: 5rem 0;height: fit-content;}
.stripe--accent{background: var(--red);border-bottom: 1rem solid var(--bg);box-shadow: 0 .3rem 0 0 var(--muted);}
.stripe--projects{background:#111;padding:0.6rem 0;position: relative;}
.stripe--projects .bigword{color:var(--yellow);white-space:nowrap;overflow:visible;text-transform:lowercase;}

/* Big single-word headings that expand to viewport width */
.bigword{
  font-family:'syoogbold', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  margin:0;
  font-size: 15vW;
  letter-spacing:-0.02em;
  line-height: 0.85;
  text-align: center;
}

.stripe-head{display:flex;align-items:center;justify-content: center;position: relative;width: 100%;}
.stripe-head .see-all{color:var(--muted);text-decoration:none;font-size: clamp(1rem, 2vw, 3rem);}
/* Accent stripe (Videos) */
.stripe--accent .bigword{
  font-size: 20vW;
  -webkit-text-stroke-width: clamp(.2vW, .3rem, .4vW );
  -webkit-text-stroke-color: var(--muted);
  color: transparent;
}
.see-all{float:right;color:var(--muted);text-decoration:none;position: absolute;bottom: -1.5rem;right: 6%;font-family: 'syoogbold', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;}

.cards{display:grid;grid-template-columns:1fr;margin-top:1rem;}
.card{background:#1a1a1a;padding:.6rem;border-radius:6px}
.thumb{height:140px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border-radius:4px;margin-bottom:.5rem}
.card h3{margin:.2rem 0 .3rem 0}
.meta{color: var(--yellow);}
.meta b{font-weight: normal;}

/* ScrollSmoother wrapper */
#smooth-wrapper {
	overflow: hidden;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
#smooth-content {
	overflow: visible;
	width: 100%;
}

/* Showreels - always 2 columns */
.cards--showreels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	padding: 2rem 0;
	align-items: start;
	box-shadow: 0 .1rem 0 0 var(--red), 0 .5rem 0 0 var(--bg), 0 0.6rem 0 0 var(--red);
}

/* Elastic Grid Videos */
.cards--videos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	padding: 2rem 0;
	align-items: start;
}

.grid-item {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	will-change: transform, opacity;
	opacity: 0;
}

 .cards--videos .grid-item{border-radius: 0 0 1rem 1rem;box-shadow: 0 0 0 .1rem var(--blue);transition: box-shadow 350ms ease}
 .cards--videos .grid-item:hover,.cards--videos .grid-item.ai-prod:hover{ box-shadow: 0 0 0 .1rem var(--red) ; transition: box-shadow 350ms ease}

 .cards--showreels .showreel{background: transparent;border-radius: 0rem 0rem 1rem 1rem;transition: background 350ms ease;overflow: hidden;box-shadow: 0 0 0 .1rem var(--red);} 
 .cards--showreels #ai-showreel{background: transparent;border-radius:0rem 0rem 1rem 1rem;transition: background 350ms ease;overflow: hidden;box-shadow: 0 0 0 .1rem var(--red);}
 .cards--showreels .showreel:hover{background: var(--red);transition: background 350ms ease}
 .cards--showreels #ai-showreel:hover{background: var(--blue);transition: background 350ms ease}


 .cards--projects .grid-item{border-radius: 1rem;box-shadow: 0 0 0 .1rem var(--yellow);transition: box-shadow 350ms ease}
 .cards--projects .grid-item:hover{ box-shadow: 0 0 0 .1rem var(--teal); transition: box-shadow 350ms ease}

.grid-item img {
	width: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 32/9;
	height: auto;
}

/* Video thumbnails:
   .card-thumb  = 32/9 mask/window  (overflow:hidden clips the image)
   img inside   = 16/9 (same width -> 2x taller than container, bleeds top+bottom)
   Text overlay flows naturally below .card-thumb in normal document flow. */
   
.card-thumb {
	position: relative;
	overflow: hidden;    /* THIS is the 32/9 mask */
	aspect-ratio: 32/9;
	width: 100%;
}
.cards--videos .card-thumb img,
.cards--showreels .card-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;  /* 2x container height at equal width */
	object-fit: cover;
	will-change: transform;
}

.cards--projects .grid-item img {
	aspect-ratio: 4/3;
	will-change: transform;
}
.hide{display:none;}

.grid-item-overlay {
	position: relative;
	padding: 1.5rem;
	color: white;
	pointer-events: none;
}

.grid-item-overlay h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
}

.cards--showreels .grid-item-overlay h3 {
	font-size: 1.5rem;
}

/* DimBox caption - matches grid h3 */
.dimbox-caption {
    color: var(--teal);
    font-size: 1.1rem;
    line-height: 1rem;
    text-align: left;
    margin: 1.5rem auto 1.5rem auto;
    cursor: default;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
    align-items: center;
    justify-content: center;
    align-self: start;
}
.dimbox-caption p {
    color: var(--muted);
    display:block;
    margin:.3rem;
    font-weight:normal;
  }
.dimbox-container *:active, .dimbox-container *:focus, .dimbox-container *:focus-visible {
    outline-style: none;
}  
.dimbox-sequence { display: none; }

@media (orientation: portrait) {
    .dimbox-btn-prev, .dimbox-btn-next {
        top: auto;
        top: 33px;
    }
    .dimbox-btn-next {
      left: 48px;
      transform: translateY(-50%);}
    .dimbox-caption {
      position: fixed;
      align-items: flex-start;
      flex-direction: row;
      gap:.5rem;
        bottom: 1rem;
      }

    .dimbox-caption p {margin: 0rem;}
    .dimbox-content.dimbox-transition-left .dimbox-caption, .dimbox-content.dimbox-transition-right .dimbox-caption{ opacity:0;}
}

.dimbox-content {
    margin-top:15px;
}

.dimbox-figure, .dimbox-video-container, .dimbox-iframe-container {
    max-height: calc(100vh - 10vH);
}

.dimbox-container , .dimbox-container *:focus, .dimbox-container *:focus-visible {
    outline-style: none;
}

.dimbox-container::before {
  background-color: var(--bg);
  opacity: .85;
}


.grid-item-overlay .meta {
	margin: 0;
	font-size: 1rem;
	opacity: 0.8;
}

.ai-prod .card-thumb {
	position: relative;
}
.ai-prod .card-thumb::before {
	content: 'AI';
	position: absolute;
	top: .6rem;
	left: .6rem;
	z-index: 2;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--muted);
	background: var(--blue);
	border-radius: 0rem .25rem .25rem .25rem;
	padding: .2em .5em;
	line-height: 1.6;
	pointer-events: none;
}


.cards--projects {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	padding: 2rem 0;
}

.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:.6rem}
.project{background:linear-gradient(90deg,#2a2a2a,#111);padding:1rem;border-radius:6px;text-align:center}

.lab{background:var(--blue);color:#fff;padding:1rem 0;margin-top:1rem;position: relative;}
.lab-scroll{display:flex;gap:.6rem;overflow:auto;padding:0.6rem 0}
.lab-tile{min-width:120px;background:#fff;color:#111;padding:.6rem;border-radius:6px}

.site-footer {
	background: var(--blue);
	border-top: 1px solid rgba(255,255,255,0.07);
}
.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1.25rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.footer-brand {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.footer-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue);
	border-radius: .5rem;
	padding: .5rem;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border: .08rem solid var(--teal);
}
.footer-icon img { width: 100%; height: auto; display: block; }
.footer-malt img {
	display: block;
	height: 2.5rem;
	width: auto;
	filter: hue-rotate(50deg);
	transition: filter .25s ease;
}
.footer-malt:hover img { filter: hue-rotate(0deg); }
.footer-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .4rem;
}
.footer-social {
	display: flex;
	gap: 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-social a {
	--icon-color: var(--teal);
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	text-decoration: none;
}
.footer-social a:hover { --icon-color: var(--yellow); }
.footer-social svg {
	fill: var(--icon-color);
	transition: fill .25s ease;
	width: 100%;
	height: 100%;
	display: block;
}
.footer-copy {
	margin: 0;
	font-size: .72rem;
	color: var(--red);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-family: 'syoogbold', 'Space Grotesk', system-ui;
	padding-top: .5rem;
}
@media (max-width: 599px) {
	.footer-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.footer-right { align-items: center; }
}

/* Responsive grid breakpoints
   Mobile-first. Each breakpoint sets ALL three grid types
   explicitly so there is no cascade ambiguity. */

/* < 600px - single column for everything */
@media(max-width:599px){
  .cards--showreels { grid-template-columns: 1fr; }
  .cards--videos    { grid-template-columns: 1fr; }
  .cards--projects  { grid-template-columns: repeat(1,1fr); }
}

/* 600px - 1099px - showreels & videos 2-col, projects 2-col */
@media(min-width:600px) and (max-width:1099px){
  .cards--showreels { grid-template-columns: repeat(2,1fr); }
  .cards--videos    { grid-template-columns: repeat(2,1fr); }
  .cards--projects  { grid-template-columns: repeat(2,1fr); }
}

/* 1100px - 1899px - showreels 2-col, videos 2-col, projects 4-col */
@media(min-width:1100px) and (max-width:1899px){
  .cards--showreels { grid-template-columns: repeat(2,1fr); }
  .cards--videos    { grid-template-columns: repeat(2,1fr); }
  .cards--projects  { grid-template-columns: repeat(4,1fr); }
}

/* 1900px+ - showreels 2-col, videos 3-col, projects 5-col */
@media(min-width:1900px){
  .cards--showreels { grid-template-columns: repeat(2,1fr); }
  .cards--videos    { grid-template-columns: repeat(3,1fr); }
  .cards--projects  { grid-template-columns: repeat(5,1fr); }
}

/* Hero layout - kicks in at 720px */
@media(min-width:720px){
  .nav-list{display:flex}
  .nav-list a{color:#fff}
  .hero-inner{grid-template-columns:1fr 360px;align-self: flex-end;margin-bottom: 7rem;}
  .hero-left{padding-right:1.2rem}
  .hero-right{justify-self:end;align-self: end;z-index:2;margin: 1rem 0;}
  .project-grid{grid-template-columns:repeat(4,1fr)}
}

/* Large hero name */
@media(min-width:1100px){
  .hero-inner{width:100%;}
  .name{font-size:8.8rem}
}
@media(min-width:1900px){
  .hero-inner{width:100%;}
  .name{font-size:8.8rem}
}

/* DimBox tweaks */
@media(max-width:768px){
  .dimbox-btn-fullscreen { display: none; }
}
@media(max-width:720px){
  .dimbox-figure, .dimbox-video-container, .dimbox-iframe-container {
    height: 80vH;
    aspect-ratio: 16 / 9;
    max-width: 100vW;
    min-width: 500px;
    transform: scale(.75);
  }
}