@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('assets/fonts/ABCFavoritMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABC Favorit Mono';
  src: url('assets/fonts/ABCFavoritMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adobe Devanagari';
  src: url('assets/fonts/AdobeDevanagari-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0d0d;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.25);
  --accent: #f22f2f;
  --text-size: 12px;
  --gutter: 20px;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

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

/* Persistent background photo: fades in once the loading collage finishes clearing, then stays. */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(13, 13, 13, 0.5), rgba(13, 13, 13, 0.5)),
    url('assets/background3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.bg-photo.is-visible {
  opacity: 1;
}

body {
  font-family: 'ABC Favorit Mono', -apple-system, BlinkMacSystemFont, monospace;
  color: var(--muted);
}

/* Loading sequence: photo collage on the same grid, one at a time, then gone */
.loader {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 100;
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(90, 1fr);
  column-gap: var(--gutter);
  padding: 0 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.loader.is-fading {
  opacity: 0;
}

.loader.is-hidden {
  display: none;
}

.loader-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.loader-photo.is-visible {
  opacity: 1;
}

.loader-a { grid-column: 3 / 6; grid-row: 8 / 31; }
.loader-b { grid-column: 9 / 13; grid-row: 4 / 28; }
.loader-c { grid-column: 1 / 3; grid-row: 27 / 55; }
.loader-d { grid-column: 6 / 8; grid-row: 21 / 50; }
.loader-e { grid-column: 7 / 9; grid-row: 53 / 83; }
.loader-f { grid-column: 10 / 13; grid-row: 37 / 79; }
.loader-g { grid-column: 1 / 5; grid-row: 60 / 87; }
.loader-h { display: none; } /* mobile-only photo (replaces loader-g in the bottom-right mobile slot); not used in desktop's 7-photo collage */

.page {
  position: relative;
  height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 20px;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  width: 100%;
}

.row--top,
.row--bottom {
  align-items: start;
}

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

/* Top row: clock + locations */
.row--top {
  font-size: var(--text-size);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.row--top .clock {
  grid-column: 2 / span 5;
  font-weight: 400;
}

.row--top .locations {
  grid-column: 11 / span 2;
  font-weight: 400;
}

/* Main hero row: logo + tagline/nav */
.row--main {
  align-items: center;
}

/* Wrappers exist only for mobile's independent logo-centering trick (see mobile
   media query) — on desktop they must stay invisible to layout so .logo /
   .tagline-label / .tagline-phrase remain direct grid children of .row--main,
   preserving the grid-column placement above. */
.logo-wrap,
.tagline-wrap {
  display: contents;
}

.logo {
  grid-row: 1;
  grid-column: 2 / span 6;
  width: min(19.4vw, 279px);
  height: auto;
}

/* Past 1080p (1920px), the 279px cap above stops the logo from growing further,
   leaving it looking small on larger screens — resume scaling at the same 19.4%
   rate, continuing smoothly from the 279px it's already at right at 1920px
   (no jump: at exactly 1920px this formula also equals 279px). */
@media (min-width: 1920px) {
  .logo {
    width: calc(279px + (100vw - 1920px) * 0.194);
  }
}

.tagline-label {
  grid-row: 1;
  grid-column: 7 / span 2;
  align-self: start;
  font-size: var(--text-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}

.tagline-phrase {
  grid-row: 1;
  grid-column: 9 / 12;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--text-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}

.tagline-phrase > .nav-item {
  align-self: flex-end;
}

.tagline-line {
  display: flex;
  align-items: baseline;
}

/* "+" pulled out of the flex flow entirely and positioned with a calc(vw + px)
   formula, not a fixed gap — needed because CREATIVE STUDIO's and APPAREL
   MANAGEMENT SERVICE's positions each have a viewport-proportional component
   (grid-column-based) AND a fixed-px component (their own fixed 12px-font text
   width, which doesn't scale with viewport). A single fixed gap only matched
   the horizontal center at one specific width and drifted at others (confirmed:
   off by ~13px between 1440px and 1700px) — this formula was fit from exact
   measurements at two viewport widths (1440px and 1700px) and reproduces the
   true center within rounding error at both, so it holds at any width in between
   and beyond (grid math is linear in viewport width). Stays on CREATIVE STUDIO's
   line vertically (`top: 0`, matching line 1's top since tagline-line is
   .tagline-phrase's first child) — only horizontal position changes. */
.tagline-static {
  position: absolute;
  top: 0;
  left: calc(12.5vw - 37.45px);
}

/* Forced superscript: Figma doesn't render this glyph raised, so it's faked here
   with a smaller size + negative margin/raised baseline. Own font (Adobe
   Devanagari), not the site's mono typeface. */
.dagger {
  font-family: 'Adobe Devanagari', serif;
  font-size: 0.6em;
  font-weight: 400;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.15em;
}

/* Nav items inside the tagline: hover to reveal their service list, right-aligned beneath them.
   Sticky: revealing is triggered by hover, but stays open (via .is-open, added by script.js)
   even after the mouse leaves, until a different nav-item is hovered. */
.nav-item {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-item:hover,
.nav-item.is-open {
  color: var(--accent);
}

.dropdown {
  position: absolute;
  top: calc(100% + 90px);
  right: 0;
  list-style: none;
  text-align: right;
  color: var(--accent);
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-item:hover .dropdown,
.nav-item.is-open .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown li + li {
  margin-top: 0;
}

/* Bottom row: copyright + contact */
.row--bottom {
  font-size: var(--text-size);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.row--bottom .copyright {
  grid-column: 9 / 12;
  text-align: right;
}

.row--bottom .copyright span:last-child {
  font-weight: 400;
}

.row--bottom .contact {
  grid-column: 2 / span 5;
}

.row--bottom .contact span {
  font-weight: 700;
  display: block;
}

.row--bottom .contact span.case-studies-word {
  display: inline;
}

.row--bottom .contact a {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

/* Hover: highlight the hovered line white. Time + its location count as one line. */
.clock span,
.locations span,
.row--bottom .copyright span,
.row--bottom .contact span,
.row--bottom .contact a {
  transition: color 0.15s ease;
}

.row--bottom .copyright span:hover,
.row--bottom .contact span:hover,
.row--bottom .contact a:hover {
  color: var(--white);
}

.clock span.is-hovered,
.locations span.is-hovered {
  color: var(--white);
}

/* Staggered reveal: logo, then tagline, then the rest, no transition */
@keyframes reveal {
  to {
    opacity: 1;
  }
}

.logo,
.tagline-label,
.tagline-line,
.tagline-phrase > .nav-item,
.row--top .stack > *,
.row--bottom .stack > * {
  opacity: 0;
  animation: reveal 1ms steps(1, end) forwards;
  animation-play-state: paused;
}

body.loaded .logo,
body.loaded .tagline-label,
body.loaded .tagline-line,
body.loaded .tagline-phrase > .nav-item,
body.loaded .row--top .stack > *,
body.loaded .row--bottom .stack > * {
  animation-play-state: running;
}

.logo {
  animation-delay: 0.05s;
}

.tagline-label,
.tagline-line {
  animation-delay: 0.23s;
}

.tagline-phrase > .nav-item {
  animation-delay: 0.4s;
}

/* Top/bottom reveal by line, not by row: every block's first line together, then every block's second line */
.row--top .stack > *:first-child,
.row--bottom .stack > *:first-child {
  animation-delay: 0.62s;
}

.row--top .stack > *:last-child,
.row--bottom .stack > *:last-child {
  animation-delay: 0.79s;
}

/* Mobile: single non-scroll viewport, condensed */
@media (max-width: 860px) {
  .page {
    padding: 56px 24px;
  }

  /* Shifted up from center to match the mobile mockup's crop — shows more of
     the tree/lamp near the top of the photo instead of centering on the
     bean-bags/people lower down. */
  .bg-photo {
    background-position: center top;
  }

  /* Mobile loader collage: new layout + new grid entirely (6 cols x 8 rows,
     margin 16, gutter 8, from Figma Inspect on the 390x844 frame) — replaces the
     previous mobile-only reuse of the 12-col/90-row desktop template, since this
     reference frame uses its own distinct grid. 5 photos (d, c, a, e, g);
     b and f are dropped rather than shrunk further. */
  .loader {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    padding: 16px;
  }

  .loader-d { grid-column: 4 / 6; grid-row: 1 / 3; }
  .loader-c { grid-column: 2 / 4; grid-row: 3 / 5; }
  .loader-a { grid-column: 1 / 5; grid-row: 5 / 7; }
  .loader-e { grid-column: 1 / 3; grid-row: 7 / 9; }
  /* Bottom-right: went loader-b (bean-bag room, wrong photo) → loader-g
     (shelves/clothing-rack/lamp/people, but same crop issue) → loader-h, a
     panoramic pre-cropped version of the same scene the user shot specifically
     for this slot (natural 708x309, aspect 2.29:1). Spans columns 3-6
     (grid-column: 3 / 7, 4 columns wide, same footprint loader-g used here) —
     but the OLD 2-row-tall cell (226x189, aspect 1.20:1) was nowhere close to
     that shape, so object-fit:cover was cropping away nearly half the image's
     width to force it into a too-tall box. Shrunk to a single row (grid-row:
     7/8, ~226x90 → aspect ~2.5:1) — within ~9% of the image's own aspect
     ratio, so cover crops only a few px off the top/bottom (imperceptible)
     instead of slicing the sides. Top-aligned with loader-e (not bottom-
     aligned — user corrected this: it should line up with loader-e's top
     edge, leaving the gap at the bottom of the cell instead of the top). */
  .loader-h {
    display: block;
    grid-column: 3 / 7;
    grid-row: 7 / 8;
  }

  .loader-b,
  .loader-f,
  .loader-g {
    display: none;
  }

  .row--top,
  .row--bottom {
    display: flex;
    justify-content: space-between;
  }

  .row--top {
    flex-direction: row-reverse;
  }

  .row--top .locations {
    grid-column: auto;
    text-align: left;
  }

  .row--top .clock {
    grid-column: auto;
    text-align: right;
    align-items: flex-end;
    margin-top: 20px;
  }

  .dropdown {
    display: none;
  }

  /* row--main used to center logo-wrap within its own leftover flex space
     (whatever's left after row--top/row--bottom) — but that space isn't
     itself centered in the frame when the header and footer are different
     heights (here: the clock's `margin-top: 20px` makes row--top taller than
     row--bottom), so "centered in the leftover space" silently drifted ~10px
     off true center. Kept as an empty flex:1 spacer (still needed so
     row--top/row--bottom land in their normal space-between positions); the
     actual centering now happens via logo-wrap being absolutely positioned
     against .page directly (below), independent of row--top/row--bottom's
     heights. */
  .row--main {
    flex: 1;
    text-align: center;
  }

  /* Absolutely positioned against .page (not row--main) so its own vertical
     center lands at exactly 50% of the true frame height, regardless of any
     row--top/row--bottom height difference — matches the Figma reference,
     where "centered" means the logo's own center = the frame's exact center,
     not the center of whatever space happens to be left over. Deliberately
     centers just the logo (not the logo+tagline block together, which was
     tried and reverted — user preferred the logo centered on its own,
     tagline hanging relative to it beneath).
     left/right: 24px (not 0) — absolutely positioned offsets are measured
     against the containing block's PADDING box, which ignores .page's own
     padding entirely; left:0/right:0 silently spanned edge-to-edge instead of
     respecting .page's 24px side padding, making this box (and the logo at
     80% of it) wider than intended and pushing the whole unit tall enough to
     clip the header/footer's second lines. 24px restates .page's own
     horizontal padding value (see .page, mobile override) so the width
     matches what normal in-flow layout gave it before. */
  .logo-wrap {
    display: block;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Columns 3-10 (8 of the previous 10-column, edge-to-edge span) = 80% width,
     centered within the same content area via margin:auto. */
  .logo {
    grid-column: auto;
    display: block;
    width: 80%;
    max-width: none;
    margin: 0 auto;
  }

  /* Pulled out of flow entirely (position:absolute) so its height never affects
     where the logo is centered — anchored to logo-wrap's bottom edge instead,
     with the deliberately larger gap from the logo as a margin, not a flex gap. */
  .tagline-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 63.36px;
    white-space: nowrap;
  }

  .tagline-label {
    grid-column: auto;
    text-align: center;
    font-weight: 400;
  }

  .tagline-phrase {
    grid-column: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 400;
  }

  /* "SERVICE" is dropped from "APPAREL MANAGEMENT SERVICE" on mobile only. */
  .service-word {
    display: none;
  }

  /* "/ CASE STUDIES" is dropped from "CONTACT / CASE STUDIES" on mobile only.
     Needs this specific a selector to beat `.row--bottom .contact span { display: block }`. */
  .row--bottom .contact span.case-studies-word {
    display: none;
  }

  .tagline-phrase > .nav-item {
    align-self: center;
  }

  .tagline-line {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .nav-item,
  .tagline-static {
    white-space: nowrap;
  }

  /* "+" already sits on its own isolated line on mobile (.tagline-line is a
     column here) — undo the desktop absolute-positioning trick entirely so it
     flows normally in that column instead of floating over other content. */
  .tagline-static {
    position: static;
  }

  /* Dagger superscript is desktop/web only — not shown on mobile. */
  .dagger {
    display: none;
  }

  .row--bottom .copyright {
    grid-column: auto;
    text-align: right;
  }

  .row--bottom .contact {
    grid-column: auto;
    text-align: left;
    order: -1;
  }

  .row--top,
  .row--bottom {
    font-size: 9px;
  }
}