/* ============================================================
   DeviLabs hero redesign — scoped styles
   All classes prefixed `dl-` to avoid collisions with the
   existing site CSS. CSS variables are scoped to .dl-header
   and .dl-hero so they don't leak into the rest of the page.
   ============================================================ */

.dl-header,
.dl-hero {
  --dl-bg:        #0F2A1F;
  --dl-mint:      #8FE3A8;
  --dl-off-white: #E9EFEA;
  --dl-lime:      #C8FA4B;
  --dl-lime-text: #0F2A1F;

  --dl-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --dl-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --dl-container-max: 1440px;
  --dl-pad-x: clamp(20px, 4vw, 48px);

  /* Collage motion — tune speed in one place. */
  --dl-collage-speed: 55s;
  --dl-collage-gap:   14px;
  --dl-collage-height: calc(100vh - 20px);
}

/* Local box-sizing reset for our subtree only. */
.dl-header,
.dl-header *,
.dl-header *::before,
.dl-header *::after,
.dl-hero,
.dl-hero *,
.dl-hero *::before,
.dl-hero *::after {
  box-sizing: border-box;
}

/* ============================================================
   SKIP LINK (a11y) — scoped to our header
   ============================================================ */
.dl-skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  padding: 10px 14px;
  background: var(--dl-lime);
  color: var(--dl-lime-text);
  font-family: var(--dl-font-body);
  font-weight: 600;
  border-radius: 8px;
  z-index: 100;
  text-decoration: none;
}
.dl-skip-link:focus { top: 12px; }

/* ============================================================
   HEADER / NAV  (component: dl-header)
   ============================================================ */
.dl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--dl-bg);
  font-family: var(--dl-font-body);
  color: var(--dl-off-white);
  color-scheme: dark;
}
.dl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(8px, 1.5vw, 20px) 18px var(--dl-pad-x);
  max-width: var(--dl-container-max);
  margin: 0 auto;
  position: relative;
}
.dl-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: inherit;
}
.dl-brand__logo {
  height: 120px;
  width: auto;
  display: block;
}
.dl-brand__text {
  font-family: var(--dl-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--dl-off-white);
  letter-spacing: -0.01em;
}

.dl-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}
.dl-nav__list li { margin: 0; padding: 0; }

.dl-nav__link {
  color: var(--dl-off-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 150ms ease;
}
.dl-nav__link:hover { opacity: 1; }

/* CTA button — used in nav and hero */
.dl-cta {
  display: inline-block;
  background: var(--dl-lime);
  color: var(--dl-lime-text);
  font-family: var(--dl-font-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 120ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.dl-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(200, 250, 75, 0.6);
}
.dl-cta--pill { font-size: 14px; padding: 11px 20px; }
.dl-cta--lg   { font-size: 16px; padding: 16px 26px; }

/* Hamburger toggle — hidden on desktop */
.dl-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(233, 239, 234, 0.2);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.dl-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--dl-off-white);
  border-radius: 2px;
}

/* a11y focus state */
.dl-header :focus-visible,
.dl-hero :focus-visible {
  outline: 2px solid var(--dl-lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   HERO  (component: dl-hero)
   Full-bleed: breaks out of any parent max-width container
   by using viewport-relative width + negative margins.
   ============================================================ */
.dl-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: calc(100vh - 120px);
  background: var(--dl-bg);
  color: var(--dl-off-white);
  color-scheme: dark;
  font-family: var(--dl-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.dl-hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 80px) var(--dl-pad-x);
  padding-left: clamp(80px, 9vw, 160px);
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}
.dl-hero__text { max-width: 560px; }
.dl-hero__h1 {
  font-family: 'Poppins', var(--dl-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--dl-mint);
  margin: 0 0 24px;
}
.dl-hero__sub {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--dl-off-white);
  margin: 0 0 36px;
  max-width: 560px;
}

/* ============================================================
   COLLAGE  (component: dl-collage)
   Three columns of auto-scrolling tiles. Left + right scroll up,
   middle scrolls down, all at the same constant speed.
   ============================================================ */
.dl-collage {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: var(--dl-collage-height);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dl-collage-gap);
  overflow: hidden;
}
.dl-collage__col { overflow: hidden; }
.dl-collage__track {
  display: flex;
  flex-direction: column;
  gap: var(--dl-collage-gap);
  will-change: transform;
}
.dl-collage__col--up .dl-collage__track {
  animation: dl-collage-scroll-up var(--dl-collage-speed) linear infinite;
}
.dl-collage__col--down .dl-collage__track {
  animation: dl-collage-scroll-down var(--dl-collage-speed) linear infinite;
}
@keyframes dl-collage-scroll-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes dl-collage-scroll-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-collage__track { animation: none !important; }
}

/* Individual tile */
.dl-collage__tile {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #1b3d2e 0%, #244e3a 50%, #163325 100%);
  box-shadow:
    inset 0 0 0 1px rgba(143, 227, 168, 0.06),
    0 8px 28px -16px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.dl-collage__tile--9x16 { aspect-ratio: 9 / 16; }
.dl-collage__tile--4x5  { aspect-ratio: 4 / 5; }
.dl-collage__tile--1x1  { aspect-ratio: 1 / 1; }

/* Placeholder color variants */
.dl-collage__tile--v1 { background: linear-gradient(135deg, #1b3d2e, #2a5c44); }
.dl-collage__tile--v2 { background: linear-gradient(135deg, #244e3a, #14302a); }
.dl-collage__tile--v3 { background: linear-gradient(160deg, #1b3d2e, #325a45 60%, #1f4030); }
.dl-collage__tile--v4 { background: linear-gradient(135deg, #163325, #1b3d2e 80%); }
.dl-collage__tile--v5 { background: linear-gradient(135deg, #2a5c44, #1b3d2e); }

.dl-collage__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dl-font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dl-mint);
  opacity: 0.55;
}
.dl-collage__tile video,
.dl-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   RESPONSIVE — mobile single-column + hamburger
   ============================================================ */
@media (max-width: 960px) {
  /* ── Nav: logo left, hamburger right ── */
  .dl-header__inner {
    padding: 14px var(--dl-pad-x);
    justify-content: flex-start; /* logo anchors left */
  }
  .dl-brand__logo { height: 80px; }

  .dl-nav__toggle {
    display: inline-flex;
    margin-left: auto; /* push toggle to the far right */
  }

  /* Collapse nav wrapper out of flex flow so it doesn't displace the toggle */
  .dl-header__inner > nav {
    width: 0;
    overflow: visible;
    flex-shrink: 0;
    padding: 0;
  }

  .dl-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--dl-pad-x) 20px;
    background: var(--dl-bg);
    border-top: 1px solid rgba(233, 239, 234, 0.08);
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
    display: none;
  }
  .dl-nav__list.is-open { display: flex; }
  .dl-nav__list li { width: 100%; }
  .dl-nav__link { display: block; padding: 14px 0; font-size: 16px; }
  .dl-nav__list .dl-cta {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }

  /* ── Hero: let height grow so collage shows below text ── */
  .dl-hero {
    height: auto;
    min-height: unset;
  }
  .dl-hero__inner {
    height: auto;
    max-width: 100%;
    padding: clamp(40px, 8vw, 64px) var(--dl-pad-x) 32px;
  }
  .dl-collage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: clamp(420px, 70vh, 560px);
  }
}

@media (max-width: 480px) {
  .dl-hero__h1 { font-size: clamp(36px, 9vw, 48px); }
  .dl-collage { height: 420px; }
  .dl-header, .dl-hero { --dl-collage-gap: 10px; }
}