:root{
  --black:#000000;
  --white:#ffffff;
  --header-h:88px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Archivo', sans-serif;
  overflow-x:hidden;
}

/* ---------- Archivo Black, black fill / white outline (header) ---------- */
.stroke-text, h1, h2, h3, .nav-link, #lang-toggle{
  font-family:'Archivo Black', sans-serif;
  color:var(--black);
  -webkit-text-stroke:1px var(--white);
  letter-spacing:0.02em;
}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:999;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  opacity:1;
  transition:opacity 1s ease;
  animation:hf-preloader-failsafe 0s 30s forwards;
}
@keyframes hf-preloader-failsafe{to{visibility:hidden; pointer-events:none;}}
#preloader.fade-out{opacity:0;}
.preloader-video{
  width:100%; height:100%; object-fit:cover;
  display:none;
  opacity:0;
  transition:opacity 1s ease;
}
#preloader.visible .preloader-video{opacity:1;}
#preloader-desktop{display:block;}
@media (max-width:768px){
  #preloader-desktop{display:none;}
  #preloader-mobile{display:block;}
}
body.preloader-active{overflow:hidden;}

/* ---------- Header ---------- */
#site-header{
  position:fixed; top:0; left:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 2rem;
  padding-top:calc(1.25rem + env(safe-area-inset-top,0px));
  width:100%;
}
.logo img{height:22px; width:auto; display:block;}
#main-nav{display:flex; align-items:center; gap:2rem;}
.nav-link, #lang-toggle{
  background:none; border:none; cursor:pointer;
  font-size:1.2rem;
  text-transform:uppercase;
  transition:color 0.5s ease, -webkit-text-stroke 0.5s ease;
}
.nav-link.active,
.nav-link:hover,
#lang-toggle:hover{
  color:var(--white);
  -webkit-text-stroke:0px transparent;
}

/* ---------- Sections ---------- */
.section{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}

/* Home */
#home{padding:0;}
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Mission */
#mission{
  position:relative; overflow:hidden;
  min-height:130vh;
  padding:4rem 0;
}
.mission-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
#mission::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1;
}
.mission-inner{
  position:relative; z-index:2;
  max-width:960px;
  padding:0 1.5rem;
  padding-top:var(--header-h);
  text-align:center;
}
.mission-line{
  margin-bottom:4rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 1s ease, transform 1s ease;
}
.mission-line img{ max-width:100%; height:auto; }
.mission-line.visible{opacity:1; transform:translateY(0);}
.mission-line.align-left{text-align:left;}
.mission-line.align-right{text-align:right;}

/* Projects: heading + full-width vertical accordion */
#projects{
  align-items:flex-start;
  flex-direction:column;
  padding:calc(var(--header-h) + 1rem) 0 0;
}
.projects-heading{
  width:100%;
  padding:0 2rem 1.5rem;
  text-align:left;
}
.projects-heading img{ max-width:min(560px, 100%); height:auto; }

.accordion{
  width:100%; max-width:none;
  display:flex; flex-direction:column;
}
.accordion-item{
  position:relative;
  height:300px;
  overflow:hidden;
  cursor:pointer;
  transition:height 0.6s ease;
}
.accordion-item.expanded{height:500px;}

.accordion-still, .accordion-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.accordion-still{opacity:1; transition:opacity 0.4s ease;}
.accordion-item.playing .accordion-still{opacity:0;}
.accordion-video{opacity:0; transition:opacity 0.4s ease;}
.accordion-item.playing .accordion-video{opacity:1;}

.accordion-caption{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.25rem 1.5rem;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%);
}
.caption-title{ max-width:60%; height:auto; display:block; }

/* Contact */
#contact{position:relative; overflow:hidden;}
.contact-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
#contact::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1;
}
.contact-inner{
  position:relative; z-index:2;
  max-width:560px;
  width:100%;
  padding:calc(var(--header-h) + 2rem) 1.5rem 3rem;
  text-align:center;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s ease, transform 1s ease;
}
.contact-inner.visible{opacity:1; transform:translateY(0);}

.contact-title-img{ max-width:100%; height:auto; margin:0 auto 2rem; display:block; }
.contact-subtitle-img{ max-width:60%; height:auto; margin:0 auto 3.5rem; display:block; }

#contact-form{display:flex; flex-direction:column; gap:0.9rem; text-align:left;}
.form-row{display:flex; gap:0.9rem;}
.form-row input{flex:1;}
input, textarea{
  background:transparent;
  border:1px solid var(--white);
  color:var(--white);
  font-family:'Archivo', sans-serif;
  padding:0.75rem 0.9rem;
  width:100%;
  font-size:0.95rem;
}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,0.6);}
.checkbox-label{
  font-family:'Archivo Black', sans-serif;
  color:var(--white);
  text-transform:uppercase;
  font-size:0.9rem; margin-top:0.5rem;
}

/* Checkboxes, aligned with their labels */
.checkbox-group{display:flex; flex-wrap:wrap; gap:1.25rem;}
.checkbox-group label{
  display:flex;
  align-items:center;
  gap:0.5rem;
  cursor:pointer;
}
.checkbox-group input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--white);
  cursor:pointer;
}
.checkbox-group label span{
  font-family:'Archivo Black', sans-serif;
  color:var(--white);
  text-transform:uppercase;
  font-size:0.85rem;
  line-height:1;
}

#contact-form button{
  margin-top:0.5rem;
  background:var(--white);
  color:var(--black);
  border:none;
  font-family:'Archivo Black', sans-serif;
  padding:0.9rem;
  cursor:pointer;
  letter-spacing:0.02em;
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  #site-header{padding:1rem 1.25rem; gap:1.25rem; flex-wrap:wrap;}
  .logo img{height:18px;}
  #main-nav{gap:1.25rem; flex-wrap:wrap;}
  .nav-link, #lang-toggle{font-size:1rem;}
  .form-row{flex-direction:column;}
  .accordion-item{height:220px;}
  .accordion-item.expanded{height:400px;}
  #mission{min-height:115vh; padding:3rem 0;}
  .mission-line{margin-bottom:2.5rem;}
  .mission-line.align-left, .mission-line.align-right{text-align:center;}
  .caption-title{max-width:85%;}
}

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