/* =============================================
   FONTS
   ============================================= */

@font-face {
  font-family: "Helvetica Neue";
  src: url("assets/fonts/HelveticaNeue-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("assets/fonts/HelveticaNeue-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Botch";
  src: url("assets/fonts/Botch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =============================================
   DESIGN TOKENS
   ============================================= */

:root {
  /* Colors */
  --bg: #000000;
  --text: #ffffff;
  --text-label: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.1);
  --border-tag: rgba(255, 255, 255, 0.15);
  --menu-bg: #ffffff;
  --menu-text-active: #000000;
  --menu-text-inactive: rgba(0, 0, 0, 0.4);

  /* Layout */
  --sidebar-w: 277px;
  --content-max: 1024px;
  --pad-x: 32px;
  --header-h: 68px;

  /* Gaps & paddings */
  --gap-section: 100px;
  --gap-case-content: 98px;
  --gap-tag: 8px;
  --gap-row: 8px;
  --gap-col: 36px;
  --pad-case: 60px;

  /* Typography (constant on desktop ≥1024) */
  --fs-hero: 36px;   --lh-hero: 40px;   --tr-hero: -0.72px;
  --fs-title: 36px;  --lh-title: 40px;  --tr-title: -0.72px;
  --fs-value: 32px;  --lh-value: 36px;  --tr-value: -0.64px;
  --fs-label: 16px;  --lh-label: 22px;  --tr-label: -0.16px;
  --fs-tag: 16px;    --lh-tag: 20px;    --tr-tag: -0.16px;
  --fs-desc: 16px;   --lh-desc: 22px;   --tr-desc: -0.16px;
  --fs-cta: 24px;    --lh-cta: 28px;    --tr-cta: -0.48px;
  --fs-link: 16px;   --lh-link: 22px;   --tr-link: -0.14px;

  --radius-hero: 24px;
  --radius-case: 20px;

  /* Fonts */
  --ff-sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ff-display: "Botch", "Helvetica Neue", sans-serif;
}


/* =============================================
   RESET / BASE
   ============================================= */

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

html, body { margin: 0; padding: 0; }

html { background: var(--bg); }

body.page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: rgba(255, 255, 255, 0.2); color: #fff; }


/* =============================================
   SIDEBAR (visible at ≥1200)
   ============================================= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg);
  z-index: 10;
}

.sidebar__logo {
  position: absolute;
  top: 40px;
  left: 20px;
  font-family: var(--ff-display);
  font-size: 44px;
  line-height: 44px;
  letter-spacing: -1.76px;
  color: var(--text);
  white-space: pre;
}

.sidebar__menu {
  position: absolute;
  bottom: 40px;
  left: 20px;
  width: calc(var(--sidebar-w) - 40px);
  height: 380px;
  background: var(--menu-bg);
  border-radius: 28px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar__nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.56px;
  color: var(--menu-text-inactive);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.sidebar__nav-item:hover { color: var(--menu-text-active); }
.sidebar__nav-item--active { color: var(--menu-text-active); }

.sidebar__asterisk {
  display: none;
  width: 28px;
  height: 26.63px;
  flex-shrink: 0;
}
.sidebar__nav-item--active .sidebar__asterisk { display: block; }

.sidebar__clock {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--menu-text-active);
}


/* =============================================
   MOBILE HEADER (visible at <1200)
   ============================================= */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: var(--bg);
  z-index: 20;
}

.mobile-header__logo {
  position: absolute;
  top: 20px;
  left: 32px;
  font-family: var(--ff-display);
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -1.28px;
  color: var(--text);
  white-space: nowrap;
}

.mobile-header__menu {
  position: absolute;
  top: 16px;
  right: 32px;
  width: 60px;
  height: 36px;
  border-radius: 100px;
  background: #ffffff;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}
.mobile-header__menu:hover { opacity: 0.85; }

.mobile-header__plus {
  width: 24px;
  height: 24px;
  display: block;
  color: #000;
}


/* =============================================
   MAIN COLUMN
   ============================================= */

.main {
  margin-left: var(--sidebar-w);
  width: calc(100vw - var(--sidebar-w));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero,
.cases,
.footer {
  width: 100%;
  max-width: var(--content-max);
  box-sizing: border-box;
}


/* =============================================
   HERO
   ============================================= */

.hero {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero__text {
  width: 100%;
  max-width: 796px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  color: var(--text);
}
.hero__text p { margin: 0; }
.hero__text p + p { margin-top: 24px; }

.hero__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-hero);
  overflow: hidden;
}


/* =============================================
   TAGS
   ============================================= */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tag);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--border-tag);
  border-radius: 1000px;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-tag);
  line-height: var(--lh-tag);
  letter-spacing: var(--tr-tag);
  color: var(--text);
  white-space: nowrap;
}


/* =============================================
   PRODUCT CASES — section
   ============================================= */

.cases {
  margin-top: var(--gap-section);
}

.cases__head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.cases__title {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--text);
}

.cases__list {
  display: flex;
  flex-direction: column;
}

.case + .case { border-top: 1px solid var(--border); }


/* =============================================
   CASE
   ============================================= */

.case {
  padding: var(--pad-case) 0;
}

.case__link {
  display: flex;
  flex-direction: column;
  gap: 40px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.case__link:hover { opacity: 0.95; }

.case__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-case-content);
  width: 100%;
}

.case__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-col);
  min-width: 0;
}

.case__row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-row);
}

.case__label {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  color: var(--text-label);
}

.case__value {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-value);
  line-height: var(--lh-value);
  letter-spacing: var(--tr-value);
  color: var(--text);
}

.case__desc {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
  letter-spacing: var(--tr-desc);
  color: var(--text);
}

.case__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-case);
  overflow: hidden;
  position: relative;
}

.case__awards {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}

.case__award {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
}


/* =============================================
   VIDEO TILE
   ============================================= */

.video-tile {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a2a 0%, #111 100%);
  isolation: isolate;
}

.video-tile--hero {
  background: linear-gradient(135deg, #3a3a3a 0%, #0e0e0e 100%);
}

.case:nth-of-type(1) .video-tile { background: linear-gradient(135deg, #3b1a8a 0%, #6a3acb 100%); }
.case:nth-of-type(2) .video-tile { background: linear-gradient(135deg, #c98a3a 0%, #5a2f12 100%); }
.case:nth-of-type(3) .video-tile { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); }
.case:nth-of-type(4) .video-tile { background: linear-gradient(135deg, #1f3a4a 0%, #0c1820 100%); }

.video-tile__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.video-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =============================================
   PROGRESSIVE MEDIA — poster image → video
   ============================================= */

.case__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.case__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.case__media.is-loaded .case__poster {
  opacity: 0;
}

.case__media.is-loaded .case__video {
  opacity: 1;
}


/* =============================================
   FOOTER
   ============================================= */

.footer {
  margin-top: var(--gap-section);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 150px;
  overflow: hidden;
}

.footer__top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__cta {
  margin: 0;
  max-width: 309px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  letter-spacing: var(--tr-cta);
  color: var(--text);
}

.footer__cols {
  display: flex;
  justify-content: space-between;
  width: 465px;
  flex-shrink: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__label {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  letter-spacing: var(--tr-link);
  color: var(--text-label);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__links a {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  letter-spacing: var(--tr-link);
  color: var(--text);
  transition: opacity 0.15s ease;
}
.footer__links a:hover { opacity: 0.7; }

.footer__art {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(96px, 30vw, 320px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
  white-space: nowrap;
  user-select: none;
}


/* =============================================
   BREAKPOINT 1: <1440 — content fluid (sidebar still visible)
   ============================================= */

@media (max-width: 1439.98px) {
  .main {
    align-items: stretch;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .hero,
  .cases,
  .footer {
    max-width: 100%;
  }

  .footer__cols {
    width: calc(100% - 518px);
  }

  .footer__label,
  .footer__links a {
    font-size: 14px;
    line-height: 20px;
  }
}


/* =============================================
   BREAKPOINT 2: <1200 — sidebar hidden, mobile header
   ============================================= */

@media (max-width: 1199.98px) {
  :root {
    --sidebar-w: 0px;
    --gap-case-content: 64px;
  }

  .sidebar { display: none; }
  .mobile-header { display: block; }

  .main {
    margin-left: 0;
    width: 100%;
    padding-top: var(--header-h);
  }

}


/* =============================================
   BREAKPOINT 3: <640 — narrow viewport fallback
   ============================================= */

@media (max-width: 639.98px) {
  :root {
    --fs-hero: 24px;  --lh-hero: 28px;  --tr-hero: -0.48px;
    --fs-title: 24px; --lh-title: 28px; --tr-title: -0.48px;
    --fs-value: 22px; --lh-value: 26px; --tr-value: -0.44px;
    --fs-cta: 18px;   --lh-cta: 24px;
    --gap-section: 56px;
    --gap-case-content: 24px;
    --pad-case: 32px;
    --pad-x: 20px;
  }

  .case__content { grid-template-columns: 1fr; }
  .footer { gap: 56px; }
  .hero__text p + p { margin-top: 16px; }

  .footer__top { flex-direction: column; gap: 32px; }
  .footer__cta { max-width: none; }
  .footer__cols { width: 100%; }
}


/* =============================================
   BREAKPOINT 4: <1024 — MOBILE LAYOUT
   Must be last to override narrower breakpoints above.
   ============================================= */

@media (max-width: 1023.98px) {
  :root {
    --pad-x: 16px;
    --fs-hero: 28px;  --lh-hero: 32px;  --tr-hero: -0.56px;
    --fs-title: 28px; --lh-title: 32px; --tr-title: -0.56px;
    --fs-tag: 12px;   --lh-tag: 16px;   --tr-tag: -0.12px;
    --radius-case: 16px;
    --pad-case: 40px;
    --gap-section: 80px;
    --gap-col: 8px;
  }

  /* Hero */
  .hero {
    padding-top: 32px;
    gap: 32px;
  }

  .hero__content {
    gap: 16px;
  }

  .hero__text p + p {
    margin-top: 24px;
  }

  /* Full-bleed hero video, taller than desktop */
  .hero__media {
    aspect-ratio: 390 / 556;
    border-radius: 0;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    width: calc(100% + 2 * var(--pad-x));
    max-width: none;
  }

  /* Cases: single column, square media cards */
  .case__content {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .case__link {
    gap: 24px;
  }

  .case__media {
    order: -1;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: none;
  }

  /* Hide all field labels (Project / Description / My role / Tags) */
  .case__label {
    display: none;
  }

  /* Hide entire "My role" row (first row of the second column) */
  .case__col:nth-child(2) > .case__row:first-child {
    display: none;
  }

  /* Description text → gray */
  .case__desc {
    color: var(--text-label);
  }
}


/* =============================================
   MOBILE / TABLET MENU
   ============================================= */

.menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.menu--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.menu__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu--open .menu__overlay {
  opacity: 1;
}

/* Mobile panel: vertically centered, slide-up animation */
.menu__panel {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 380px;
  background: var(--menu-bg);
  border-radius: 20px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-50%) translateY(40px);
  will-change: transform, opacity;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}

.menu--open .menu__panel {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}

.menu__nav {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu__nav-item {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.56px;
  color: var(--menu-text-inactive);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.menu__nav-item:hover { color: var(--menu-text-active); }
.menu__nav-item--active { color: var(--menu-text-active); }

.menu__clock {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--menu-text-active);
}

.menu__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 60px;
  height: 36px;
  border-radius: 100px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: opacity 0.15s ease;
}
.menu__close:hover { opacity: 0.85; }

.menu__close svg {
  width: 24px;
  height: 24px;
  display: block;
  color: currentColor;
}

/* Tablet (500–1023): floating card top-right, scale animation, no overlay */
@media (min-width: 500px) and (max-width: 1023.98px) {
  .menu__overlay {
    display: none;
  }

  .menu__panel {
    top: 40px;
    right: 40px;
    left: auto;
    width: 390px;
    border-radius: 28px;
    transform: scale(0.95);
    transform-origin: top right;
  }
  .menu--open .menu__panel {
    transform: scale(1);
  }

  .menu__close { top: 16px; right: 16px; }
}

/* Desktop (≥1024): menu disabled */
@media (min-width: 1024px) {
  .menu { display: none; }
  .mobile-header__menu { display: none; }
}