/* EMIL Distribution — offline test build.
   Rules ported 1:1 from marigrp.com (global + app-home + contact components), EMIL content swapped in. */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: AmpersandFallback; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); unicode-range: U+0026; }

/* ---------- Loader (MARI #app-loader) ---------- */
#app-loader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #121212; display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 9999; transition: opacity 0.4s ease-in;
}
#app-loader.hide { opacity: 0; pointer-events: none; }
#app-loader.hide .app-loader-logo { opacity: 0; pointer-events: none; }
.app-loader-logo { width: 150px; height: 72px; animation: spin 2s linear infinite; transition: opacity 0.2s ease-in; }
@keyframes spin { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- Global ---------- */
@media (min-width: 768px) { .hide-medium { display: none !important; } }
@media (max-width: 767px) { .hide-medium-down { display: none !important; } }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth !important; }
body { background-color: #121212; color: #fff; font-family: AmpersandFallback, Archivo, sans-serif; overflow-x: hidden; }
h1 { font-variation-settings: "wdth" 125; font-size: 4rem; line-height: 1.3333; font-weight: 400; }
h2 { font-variation-settings: "wdth" 125; font-size: 4rem; line-height: 1.3333; font-weight: 400; }
a { color: #fffc; text-decoration: underline; transition: .25s; }
a:hover { text-decoration: none; color: #fff; }
.text-muted { font-weight: 500; font-size: .875rem; letter-spacing: 3.78px; color: #fff; text-transform: uppercase; opacity: .6; }
img { max-width: 100%; height: auto; display: block; }
.row { max-width: 1134px; margin-left: auto; margin-right: auto; }
.row.pad { padding-left: 30px; padding-right: 30px; }
.emil-logo { display: block; overflow: visible; }

/* ---------- Buttons ---------- */
.btn {
  width: 250px; height: 64px; border: none; border-radius: 4px; outline: none;
  font-size: .75rem; font-weight: 600; line-height: 1.5; color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center; transition: .25s;
  background-color: #fff3; letter-spacing: 2.4px; text-transform: uppercase; font-family: Archivo, sans-serif;
}
.btn:hover { background: #fff; color: #121212; cursor: pointer; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Header ---------- */
.header { width: 100%; position: fixed; transition: .375s; z-index: 10; top: 0; }
.header--scrolled { background: #1f1f1f; }
.header--scrolled .header__inner { box-shadow: none; }
.header--scrolled .header__menu-link { color: #fff9; }
.header--scrolled .header__menu-link:hover,
.header--scrolled .header__menu-link:focus,
.header--scrolled .header__menu-link--active { color: #fff; box-shadow: inset 0 -1px #fff; }
.header__inner { display: flex; align-items: center; box-shadow: 0 1px #fff3; height: 90px; }
.header__container-inner { display: flex; align-items: center; height: 100%; }
.header__toggle-btn { display: inline-block; cursor: pointer; }
.header__toggle-btn .bar1, .header__toggle-btn .bar3 { width: 32px; height: 2px; background-color: #fff; margin: 0; transition: .4s; }
.header__toggle-btn .invis { width: 32px; height: 2px; margin: 4px 0; }
.header__toggle-btn.opened .bar1 { transform: rotate(-45deg) translate(-5px, 3px); }
.header__toggle-btn.opened .bar3 { transform: rotate(45deg) translate(-5px, -3px); }
.header__menu { display: flex; align-items: center; gap: 40px; padding: 0; list-style: none; margin: 0 0 0 auto; }
.header__menu--active .header__menu-link:not(.header__menu-link--active):not(:hover) { opacity: .6; }
.header__menu-link {
  color: #fff; transition: .25s; font-size: .75rem; line-height: 1.4; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase; text-decoration: none; display: flex; align-items: center; height: 90px;
}
.header__menu-link:hover, .header__menu-link:focus, .header__menu-link--active { cursor: pointer; text-decoration: none; color: #fff; box-shadow: 0 1px #fff; }
.header__brand { margin-right: auto; }
.header__logo { height: 40px; width: 83px; }

/* ---------- Hero ---------- */
.hero { height: 100vh; min-height: 640px; position: relative; }
.hero__inner { height: 100%; display: flex; flex-direction: column; justify-content: end; }
.hero__title { max-width: 895px; font-size: 4rem; line-height: 1.25; font-weight: 500; }
.hero__down {
  width: 80px; height: 80px; border: 2px solid rgba(255,255,255,.2); border-radius: 50%;
  margin: 40px auto 80px; transition: .5s; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1.7 4.6l6.3 6.3 6.3-6.3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.hero__down:hover, .hero__down:focus { background-position-y: 40px; border-color: #fff9; cursor: pointer; }
.hero__overlay { position: relative; z-index: 1; }
.hero__video { position: absolute; inset: 0; overflow: hidden; }
.hero__video:after { background: #121212; opacity: .7; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.5s ease, transform 8s linear; }
.hero__slide.is-active { opacity: 1; transform: scale(1); }

/* ---------- About ---------- */
.about__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 48px; padding: 160px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.about__text { font-size: 2.5rem; line-height: 1.4; }

/* ---------- Portfolio / Work ---------- */
.portfolio__inner { padding: 160px 0; }
.portfolio__more { margin: 0 auto; }
.portfolio__images { display: flex; gap: 80px; align-items: center; margin: 80px 0; }
.portfolio__overlay { position: absolute; width: 100%; height: 100%; z-index: 1; display: flex; align-items: end; }
.portfolio__item { position: relative; width: fit-content; color: #fff; transition: .25s; overflow: hidden; text-decoration: none; }
.portfolio__item img { transition: .375s; }
.portfolio__item--films .portfolio__overlay  { background: linear-gradient(180deg, #24242400, #4a3a22); }
.portfolio__item--family .portfolio__overlay { background: linear-gradient(180deg, #24242400, #5a2a1a); }
.portfolio__item--tech .portfolio__overlay   { background: linear-gradient(180deg, #24242400, #1d4650); }
.portfolio__item--global .portfolio__overlay { background: linear-gradient(180deg, #24242400, #5e5e5e); }
.portfolio__item--craft .portfolio__overlay  { background: linear-gradient(180deg, #24242400, #3a4250); }
.portfolio__item:hover img, .portfolio__item:focus img { transform: scale(1.05); cursor: pointer; }
.portfolio__item:hover .portfolio__text:after, .portfolio__item:focus .portfolio__text:after { transform: rotate(45deg); }
.portfolio__text {
  padding: 62px; font-size: 40px; font-weight: 500; width: 100%; display: flex; justify-content: space-between;
  align-items: end; line-height: 1.6; font-variation-settings: "wdth" 125; box-sizing: border-box;
}
.portfolio__text:after {
  content: ""; flex: none; width: 21px; height: 21px; margin-bottom: .45em; transition: .375s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M4 1h16v16M20 1L1 20' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.portfolio__left { flex: 1 1 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 80px; }
.portfolio__left .portfolio__item--portrait { margin-left: 25%; }
.portfolio__right { flex: 1 1 50%; display: flex; flex-direction: column; gap: 80px; transform: translateY(-3rem); }
.portfolio__right .portfolio__item--portrait { margin-right: 25%; }

/* ---------- Press / Collaborators ---------- */
.press { padding-bottom: 160px; }
.press__inner { position: relative; }
.press__title { padding-bottom: 80px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 160px; }
.press__articles { margin-bottom: 80px; position: relative; overflow: hidden; }
.press__article { height: auto; border-bottom: 1px solid rgba(255,255,255,.2); }
.press__article-inner { padding-left: 80px; padding-right: 40px; padding-bottom: 80px; border-left: 1px solid rgba(255,255,255,.2); height: 100%; box-sizing: border-box; }
.press__item { color: #fff; text-decoration: none; display: block; }
.press__item:hover .press__text, .press__item:focus .press__text { text-decoration: underline; }
.press__date { opacity: .6; letter-spacing: 3.24px; font-size: .75rem; line-height: 1.4; text-transform: uppercase; font-weight: 500; margin-bottom: 1rem; }
.press__text { margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 1.5; font-weight: 500; }
.press__description { font-size: 1rem; line-height: 1.5; opacity: .8; }
.press__more { margin: 0 auto; }
.press .swiper { width: calc(100% + 80px); left: -80px; } /* right edge flush with row so the last visible card isn't clipped */
.press .swiper-button-container { position: absolute; top: 177px; display: flex; gap: 20px; right: 30px; }
.press .swiper-button-next, .press .swiper-button-prev {
  position: static; margin: 0; display: flex; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  align-items: center; justify-content: center; cursor: pointer; background-color: transparent; transition: .25s; color: #fff;
}
.press .swiper-button-next:after, .press .swiper-button-prev:after { content: none; display: none; }
.press .swiper-button-next svg, .press .swiper-button-prev svg { width: 19px; height: 14px; }
.press .swiper-button-next:not(.swiper-button-disabled):hover, .press .swiper-button-prev:not(.swiper-button-disabled):hover { background-color: #fff3; }
.press .swiper-button-next.swiper-button-disabled, .press .swiper-button-prev.swiper-button-disabled { cursor: default; opacity: .4; pointer-events: auto; }
.press .swiper-button-prev { transform: rotate(180deg); }

/* ---------- Contact ---------- */
.contact { background-color: #1f1f1f; padding: 122px 0; }
.contact__text { font-size: 2.5rem; line-height: 1.45; font-variation-settings: "wdth" 125; text-align: center; max-width: 578px; margin: 0 auto 48px; }
.contact__button { margin: 0 auto; }

/* ---------- Footer ---------- */
.footer__top { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); padding: 24px 0; }
.footer__ask { display: flex; gap: 20px; align-items: center; margin-left: auto; }
.footer__ask-label { font-size: 1rem; line-height: 1.25rem; opacity: .6; }
.footer__brand { margin-right: auto; }
.footer__logo { height: 43px; width: 89px; }
.footer__link { letter-spacing: 2.4px; color: #fff; text-transform: uppercase; opacity: .7; text-decoration: none; display: flex; font-size: .75rem; line-height: 1.4; font-weight: 600; transition: .25s; cursor: pointer; }
.footer__link:hover, .footer__link:focus { opacity: 1; text-decoration: none; color: #fff; }
.footer__links { display: flex; gap: 40px; margin-right: 40px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 42px 0; }
.footer__service-links { display: flex; gap: 24px; }

/* ---------- Breakpoints (MARI) ---------- */
@media screen and (max-width: 1281px) {
  .hero__title { font-size: 3rem; line-height: 1.5; text-indent: 0; max-width: 680px; }
}
@media screen and (max-width: 1024px) {
  .footer__top { flex-direction: column; gap: 24px; }
  .footer__ask { margin-right: auto; padding: 0; box-shadow: none; }
  .footer__brand { margin: 0; }
}
@media screen and (max-width: 767px) {
  h1 { font-size: 32px; line-height: 42px; }
  .page-wrapper--mobile-menu-opened .header { background: #121212; }
  .page-wrapper--mobile-menu-opened .header__container-inner { left: 0; }
  .header > div { padding: 0 !important; }
  .header__inner { height: 64px; padding: 0 30px; }
  .header__logo { height: 30px; width: 62px; }
  .header__container-inner {
    position: fixed; height: calc(100% - 65px); background: #121212; top: 64px; width: 100%; left: 100%;
    transition: .25s; flex-direction: column; border-top: 1px solid rgba(255,255,255,.2); justify-content: center;
  }
  .header__menu { flex-direction: column; margin: 0; }
  .header__menu-link { height: initial; }
  .header__menu-link--active { box-shadow: none !important; }

  .hero__title { font-size: 28px; line-height: 42px; text-align: center; }
  .hero__down { margin: 40px auto 64px; }
  .about__inner { padding: 80px 0; gap: 32px; }
  .about__text { font-size: 24px; line-height: 36px; }
  .about .btn { width: 100%; }
  .portfolio__inner { padding: 80px 0; }
  .portfolio h2 { font-size: 32px; line-height: 40px; }
  .portfolio__left { margin: 0; gap: 30px; align-items: center; }
  .portfolio__item { margin: 0 30px !important; }
  .portfolio__item:first-child, .portfolio__item:last-child { margin-left: 0 !important; }
  .portfolio__item:nth-child(3) { margin-right: 0 !important; }
  .portfolio__item:nth-child(1), .portfolio__item:nth-child(5) { align-self: flex-start; }
  .portfolio__item:nth-child(3) { align-self: flex-end; }
  .portfolio__text { font-size: 24px; line-height: 40px; padding: 30px; }
  .portfolio__text:after { width: 18px; height: 18px; margin-bottom: 11px; }
  .portfolio__images { margin: 40px 0; }
  .portfolio__more { width: calc(100% - 60px); }
  .press { padding-bottom: 80px; }
  .press__title { padding-top: 80px; padding-bottom: 48px; font-size: 32px; line-height: 40px; }
  .press__articles { margin-bottom: 48px; padding-left: 0; padding-right: 0; }
  .press__article-inner { padding-left: 30px; padding-right: 30px; padding-bottom: 48px; }
  .press__more { width: calc(100% - 60px); }
  .press .swiper-button-container { display: none; }
  .press .swiper { width: calc(100% + 60px); left: -30px; }
  .contact { padding: 80px 0; }
  .contact__text { font-size: 32px; line-height: 40px; margin-bottom: 40px; }
  .contact__button { width: 100%; }
  .footer__top { gap: 0; padding: 80px 0 0; }
  .footer__ask { flex-direction: column; gap: 20px; border-top: 1px solid rgba(255,255,255,.2); width: 100%; padding: 48px 0; justify-content: center; }
  .footer__links { flex-direction: column; margin: 0 0 48px; gap: 24px; }
  .footer__link { text-align: center; justify-content: center; }
  .footer__service-links { flex-direction: column; align-items: center; }
  .footer__bottom { flex-direction: column; gap: 24px; padding: 48px 0; }
  .footer__copy { opacity: .8; }
}