/* Self-hosted fonts (no Google Fonts request needed) */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800-normal.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/open-sans-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/open-sans-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/source-sans-3-latin-300-normal.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2");}

/* =========================================================
   Imaginary Line – one-page site
   Built from Overal.jpg. Desktop sizes are in vw so the
   layout scales like the design; mobile rules at the bottom.
   ========================================================= */

:root {
  --black: #000;
  --ink: #0f1012;          /* who-we-are band */
  --grey-text: #8e8d93;    /* body text on dark */
  --dark-text: #363636;    /* text on white */
  --heading-dark: #353535; /* Color / EDITORIAL words */
  --work-bg: #404040;
  --team-bg: #141414;
  --line: #7a7a7a;
  --white: #fff;

  --f-body: "Source Sans 3", "Myriad Pro", "Segoe UI", Arial, sans-serif;
  --f-label: "Open Sans", "Segoe UI", Arial, sans-serif;
  --f-cond: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --f-wide: "Montserrat", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--black);
  color: var(--grey-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.label {
  font-family: var(--f-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--grey-text);
  font-size: clamp(20px, 2vw, 28px);
}

/* ---------------- HEADER ---------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.2vw 3.3vw;
  background: transparent;
  transition: background-color .3s, padding .3s, box-shadow .3s;
}
/* sticky state: added by js/main.js once the page is scrolled */
.site-header.is-stuck {
  background: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
.site-header.is-stuck .brand img { filter: brightness(0); }
.site-header.is-stuck .main-nav a,
.site-header.is-stuck .social a { color: #1a1a1a; }
.site-header.is-stuck .main-nav a:hover { color: #000; }
.site-header.is-stuck .nav-toggle span { background: #1a1a1a; }
.brand img { width: clamp(90px, 9.6vw, 130px); transition: filter .3s; }
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3.2vw, 52px);
  margin-right: 6vw;
}
.main-nav a {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e6e6e6;
  transition: color .2s;
}
.main-nav a:hover { color: var(--white); }
.social { display: flex; gap: 18px; }
.social a { display: inline-flex; color: #e6e6e6; transition: opacity .2s; }
.social a:hover { opacity: .7; }
.social svg { width: 15px; height: 15px; fill: currentColor; }
.nav-toggle { display: none; }

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  height: 65.5vw;
  min-height: 480px;
  max-height: 100vh;
  background: #050505 url(../images/hero.jpg) center / cover no-repeat;
  overflow: hidden;
}
.hero__title {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 83vw;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.hero h1 { grid-area: 1 / 1; width: 90%; }
.hero h1 img { width: 100%; }
.hero__bottom {
  position: absolute;
  left: 0; right: 0;
  top: 77%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vw;
}
.hero__box { width: 7.2vw; min-width: 60px; opacity: .85; }
.hero__tagline {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(14px, 1.65vw, 22px);
  color: #a9a8ad;
}

/* ---------------- WHO WE ARE ---------------- */
.about { background: var(--ink); padding: 4.6vw 0 4.6vw; }
.about__grid {
  display: grid;
  grid-template-columns: 34.2% 45%;
  column-gap: 3.7%;
  align-items: start;
}
.about .label { text-align: right; line-height: 1.1; }
.about p {
  font-family: var(--f-label);
  font-size: clamp(14px, 1.23vw, 17px);
  color: #9b9aa0;
  text-align: justify;
}

/* ---------------- REELS ---------------- */
.reels {
  overflow: hidden;
  background: var(--white);
  padding: 6.2vw 0 6.5vw;
}
.reel-carousel {
  position: relative;
  height: 29vw;
}
.reel-carousel__track { position: absolute; inset: 0; }
.reel {
  position: absolute;
  top: 50%;
  padding: 0;
  border: 0;
  background: #000;
  overflow: hidden;
  transition: all .6s cubic-bezier(.2, .7, .2, 1);
}
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 9vw; height: 9vw;
  transform: translate(-40%, -50%);
  opacity: 0;
  transition: opacity .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 8 L88 50 L18 92 Z' fill='none' stroke='white' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* positions: centre + two side peeks (matches design) */
.reel.is-active { left: 22.4vw; width: 55.4vw; height: 29vw; transform: translateY(-50%); z-index: 3; box-shadow: 0 0 0 1.6vw #111 inset; }
.reel.is-active img { padding: 1.6vw 0 0; background: #111; }
.reel.is-active .reel__play { opacity: 1; }
.reel.is-prev { left: -18vw; width: 40.4vw; height: 21.4vw; transform: translateY(-50%); z-index: 2; }
.reel.is-next { left: 77.8vw; width: 40.4vw; height: 21.4vw; transform: translateY(-50%); z-index: 2; }
.reel:not(.is-active) img { filter: brightness(.85); }
.reel-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.reel-carousel__nav--prev { left: 1.5vw; }
.reel-carousel__nav--next { right: 1.5vw; }
.reels__text {
  margin-top: 4.8vw;
  text-align: center;
  padding: 0 16px;
}
.reels__squares { width: 6.8vw; min-width: 64px; margin: 0 auto 1.3vw; }
.reels__text p {
  font-weight: 300;
  font-size: clamp(16px, 1.75vw, 24px);
  line-height: 1.25;
  color: var(--grey-text);
  max-width: 60vw;
  margin: 0 auto;
}

/* ---------------- COLOR / EDITORIAL ---------------- */
.feature {
  position: relative;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.feature--color { aspect-ratio: 2489 / 1445; background-image: url(../images/color-bg.jpg); }
.feature--editorial { aspect-ratio: 2491 / 1406; background-image: url(../images/editorial-bg.jpg); }
.feature__text {
  position: absolute;
  width: 39%;
  font-size: clamp(14px, 1.32vw, 19px);
  line-height: 1.35;
  color: #8f8e94;
  text-align: justify;
}
.feature--color .feature__text { left: 12.3%; top: 3.6%; }
.feature--editorial .feature__text { left: 48.2%; top: 2.6%; }
.feature__word {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 6.6vw;
  line-height: .8;
  color: var(--heading-dark);
  letter-spacing: -.01em;
  margin-right: .1em;
}

/* ---------------- SERVICES ---------------- */
.services-hero {
  position: relative;
  aspect-ratio: 1920 / 806;
  background: #000 url(../images/services-bg.jpg) center / cover no-repeat;
}
.services-hero__title {
  position: absolute;
  left: 12.6%;
  bottom: -.075em;
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 21vw;
  line-height: .9;
  letter-spacing: .005em;
  color: var(--white);
}
.services { background: var(--black); padding: 0; position: relative; z-index: 2; }
.services__box {
  margin: 0 3% 0 4.1%;
  background: var(--white);
  color: var(--dark-text);
  padding-top: 1.6vw;
}
.services__intro {
  max-width: 82%;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
  font-size: clamp(16px, 1.85vw, 26px);
  line-height: 1.12;
  color: var(--dark-text);
}
.services__cols {
  display: grid;
  grid-template-columns: repeat(3, 26.9%);
  column-gap: 4.3%;
  padding: 3.4vw 0 0 9.1%;
}
.service h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 34px);
  line-height: .88;
  letter-spacing: -.02em;
  margin-bottom: .35vw;
}
.service p,
.service dd,
.service dt {
  font-size: clamp(14px, 1.42vw, 19px);
  line-height: 1.12;
}
.service dl { margin-top: 1.6vw; }
.service dt { text-transform: uppercase; }
.service dd { margin-bottom: 1.5vw; }
.services__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8%;
  padding: 1.2vw 8.2% 0 8.3%;
  margin-bottom: -12vw;          /* photos hang over into WORK, like the design */
  position: relative;
  z-index: 3;
}
.services__photos img { width: 100%; aspect-ratio: 268 / 258; object-fit: cover; }

/* ---------------- VERTICAL LINE (Work → Contact) ---------------- */
.lined { position: relative; }
.lined::before {
  content: "";
  position: absolute;
  left: 7%;
  top: 4.1vw;
  bottom: 20.8vw;
  width: 3px;
  background: var(--line);
  z-index: 4;
  pointer-events: none;
}

/* ---------------- WORK ---------------- */
.work { background: var(--work-bg); }
.work__inner { position: relative; aspect-ratio: 1100 / 849; }
.work__inner > * { position: absolute; }
.work__outline { left: 6.8%; top: 23.6%; width: 85%; opacity: 1; }
.work__head { left: 16.6%; top: 30.6%; }
.work__title {
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 13.4vw;
  line-height: .78;
  color: var(--white);
}
.work__logo { width: 25vw; margin: .7vw 0 0 1.3vw; }
.work__cats { left: 16.2%; top: 44.9%; width: 59.6%; }
.work__cats li { border-bottom: 2px solid #8a8a8a; text-align: right; height: 2.95vw; }
.work__cats li:nth-child(3) { padding-right: 9.6%; }
.work__cats a {
  display: inline-block;
  padding-right: 2.6vw;
  font-weight: 600;
  font-size: 3.55vw;
  line-height: .9;
  text-transform: uppercase;
  color: #b5b5b5;
  transform: translateY(.18em);
  transition: color .2s;
}
.work__cats a:hover { color: var(--white); }
.work__posters { left: 8.8%; top: 60.6%; width: 83.5%; }

/* ---------------- TEAM ---------------- */
.team {
  background: linear-gradient(var(--black) 0 21.5vw, var(--team-bg) 21.5vw);
  padding: 6.3vw 0 4vw;
}
.team__head { text-align: center; max-width: 64vw; margin: 0 auto; }
.team__head p {
  font-family: var(--f-label);
  margin-top: .8vw;
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1.4;
  color: var(--grey-text);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8vw 1.4vw;
  width: 57vw;
  max-width: 900px;
  margin: 3vw auto 0;
}
.team__grid li { background: #0a0a0a; text-align: center; }
.team__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team__grid h3 {
  margin-top: .7vw;
  font-family: var(--f-label);
  font-weight: 400;
  font-size: clamp(10px, .82vw, 13px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfcfcf;
}
.team__grid p {
  padding-bottom: .7vw;
  font-family: var(--f-label);
  font-size: clamp(9px, .7vw, 11px);
  color: #9a9a9a;
}

/* ---------------- CONTACT ---------------- */
.contact {
  position: relative;
  aspect-ratio: 1920 / 646;
  background: #2b1d14 url(../images/contact-bg.jpg) center / cover no-repeat;
}
.contact__inner { position: absolute; left: 7.2%; top: 40%; color: var(--white); }
.contact__title {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1;
  padding-bottom: .15em;
  border-bottom: 1px solid rgba(255, 255, 255, .85);
}
.contact__line {
  display: table;
  margin-top: .45vw;
  font-weight: 600;
  font-size: clamp(15px, 1.85vw, 26px);
  line-height: 1.2;
  padding-bottom: .15em;
  border-bottom: 1px solid rgba(255, 255, 255, .85);
}
.contact__line a:hover { opacity: .8; }
.social--contact { gap: 2.4vw; margin: 1.5vw 0 0 .6vw; }
.social--contact svg { width: clamp(16px, 1.6vw, 22px); height: clamp(16px, 1.6vw, 22px); }

/* ---------------- LIGHTBOX ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .92);
  padding: 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox video { width: min(1200px, 100%); max-height: 85vh; background: #000; }
.lightbox__close {
  position: absolute;
  top: 16px; right: 22px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 44px;
  line-height: 1;
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */
@media (max-width: 900px) {
  .site-header { padding: 18px 16px; justify-content: space-between; }
  .social--header { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: 0;
    background: none;
  }
  .nav-toggle span { width: 24px; height: 2px; background: #fff; }
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0;
    background: rgba(0, 0, 0, .96);
    transform: translateY(-100%);
    transition: transform .35s;
  }
  .main-nav a { font-size: 16px; }
  .nav-open .main-nav { transform: none; }
  .nav-open .nav-toggle { position: relative; z-index: 2; }
  .site-header.is-stuck { padding-top: 10px; padding-bottom: 10px; }
  .site-header.is-stuck .main-nav a { color: #e6e6e6; }
  .nav-open .site-header.is-stuck .nav-toggle span { background: #fff; }

  .hero { height: 100svh; max-height: none; }
  .hero__title { width: 100vw; top: 45%; }
  .hero__box { width: 64px; }
  .hero__bottom { top: auto; bottom: 7%; gap: 12px; }

  .about { padding: 48px 0; }
  .container { padding: 0 16px; }
  .about__grid { grid-template-columns: 1fr; row-gap: 16px; }
  .about .label { text-align: left; }

  .reels { padding: 48px 0; }
  .reel-carousel { height: 52vw; }
  .reel.is-active { left: 8vw; width: 84vw; height: 47vw; }
  .reel.is-prev { left: -76vw; width: 80vw; height: 40vw; }
  .reel.is-next { left: 96vw; width: 80vw; height: 40vw; }
  .reel__play { width: 16vw; height: 16vw; }
  .reels__text { margin-top: 32px; }
  .reels__text p { max-width: none; }

  .feature { aspect-ratio: auto; min-height: 0; padding: 0 16px 56vw; background-position: center bottom; background-size: 100% auto; }
  .feature__text { position: static; width: auto; padding-top: 40px; color: #a3a2a8; }
  .feature__word { font-size: 64px; }

  .services-hero__title { font-size: 25vw; left: 16px; }
  .services__box { margin: 0 16px; padding: 24px 0 0; }
  .services__intro { max-width: none; padding: 0 16px; }
  .services__cols { grid-template-columns: 1fr; row-gap: 32px; padding: 32px 20px 0; }
  .service dl { margin-top: 16px; }
  .service dd { margin-bottom: 14px; }
  .services__photos { grid-template-columns: 1fr; gap: 12px; padding: 8px 20px 0; margin-bottom: -60px; }

  .lined::before { display: none; }

  .work__inner { aspect-ratio: auto; padding: 100px 16px 48px; }
  .work__inner > * { position: static; }
  .work__outline { display: none; }
  .work__title { font-size: 26vw; }
  .work__logo { width: 52vw; margin: 8px 0 0 4px; }
  .work__cats { margin-top: 24px; }
  .work__cats li { height: auto; padding: 6px 0; }
  .work__cats li:nth-child(3) { padding-right: 0; }
  .work__cats a { font-size: 26px; transform: none; padding-right: 0; }
  .work__posters { margin-top: 32px; width: 100%; }

  .team { padding: 56px 0 48px; background: linear-gradient(var(--black) 0 220px, var(--team-bg) 220px); }
  .team__head { max-width: none; padding: 0 16px; }
  .team__head p { margin-top: 10px; }
  .team__grid { width: auto; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 16px; margin-top: 32px; }
  .team__grid h3 { margin-top: 8px; }
  .team__grid p { padding-bottom: 10px; }

  .contact { aspect-ratio: auto; min-height: 320px; }
  .contact__inner { position: static; padding: 72px 16px 48px; }
  .contact__line { margin-top: 8px; }
  .social--contact { gap: 22px; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel, .main-nav, .site-header, .brand img { transition: none; }
}


/* ---------------- LOADER ---------------- */
.edgtf-st-loader1 {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--black);
  transition: opacity .6s ease, visibility .6s ease;
}
.edgtf-st-loader1 svg { width: 86px; height: 100px; }
.edgtf-st-loader1 p {
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  opacity: .8;
}
.edgtf-st-loader1.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-loading { overflow: hidden; }