@font-face {
  font-family: 'Unbounded';
  src: url('assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf') format('truetype-variations'),
       url('assets/fonts/Unbounded/Unbounded-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #FFF9DF;
  font-family: 'Unbounded', system-ui, sans-serif;
  overflow-x: hidden;
}

/* =================================================================
   TOP NAV — fixed, on every page
   ================================================================= */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 100;
  background: #000;
}
.top-nav > svg { display: block; width: 100%; height: auto; }
.top-nav .nav-zone {
  position: absolute;
  background: transparent;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.top-nav .nav-zone:hover { opacity: 0.55; }
.top-nav .zone-home  { left: 1.2%;  width: 13.5%; top: 18%; height: 64%; }
.top-nav .zone-about { left: 86.2%; width: 5.8%;  top: 40%; height: 40%; }
.top-nav .zone-work  { left: 93.1%; width: 5.7%;  top: 40%; height: 40%; }

/* =================================================================
   PAGE SECTIONS
   ================================================================= */
.page-section { position: relative; width: 100%; }
.page-section > svg { display: block; width: 100%; height: auto; }

.overlay { position: absolute; z-index: 5; }

/* --- Landing-only --- */
.arrow-hide {
  left: 4.0%; top: 34.3%;
  width: 5.0%; height: 2.6%;
  background: #000;
}
.cursor-zone {
  cursor: none;
  display: block;
  text-decoration: none;
  color: transparent;
}
/* Y positions re-measured against the rendered landing SVG:
   BRANDING y=1177-1227, EDITORIAL y=1233-1283, POSTER y=1289-1339,
   UI/UX y=1344-1395, ART y=1401-1451  (all in 2670-tall viewBox). */
.cat-branding  { left: 35%; top: 44.05%; width: 30%; height: 1.95%; }
.cat-editorial { left: 24%; top: 46.18%; width: 52%; height: 1.95%; }
.cat-poster    { left: 27%; top: 48.28%; width: 46%; height: 1.95%; }
.cat-uiux      { left: 30%; top: 50.34%; width: 40%; height: 2.00%; }
.cat-art       { left: 28%; top: 52.47%; width: 44%; height: 1.95%; }

/* --- Let's-talk underline (positioned per-section) --- */
.lets-talk-underline {
  position: absolute;
  left: 5.2%;
  width: 0;
  height: 3px;
  background: #FFF9DF;
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 5;
}
.lets-talk-underline.drawn { width: 24%; }

/* --- Trusted-by-brands hover-underline links (landing only) --- */
.brand-link {
  cursor: pointer;
  text-indent: -9999px;
  overflow: visible;
  text-decoration: none;
  color: transparent;
}
.brand-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1.6px;
  background: #FFF9DF;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.brand-link:hover::after { transform: scaleX(1); }
.brand-drink-rise      { left: 73.7%; width: 8.8%;  top: 85.7%; height: 0.7%; }
.brand-al-mukhtar      { left: 73.7%; width: 17.3%; top: 86.7%; height: 0.7%; }
.brand-cortina         { left: 73.7%; width: 7.5%;  top: 87.6%; height: 0.7%; }
.brand-way-atelier     { left: 73.7%; width: 10.5%; top: 88.6%; height: 0.7%; }
.brand-safran-du-liban { left: 73.7%; width: 14.4%; top: 89.6%; height: 0.7%; }

/* --- IG link (positioned per-section) --- */
.ig-link {
  display: block;
  left: 74.9%;
  width: 3.5%;
  cursor: pointer;
  z-index: 10;
}

/* Landing section (viewBox 2670 tall) */
#top .lets-talk-underline { top: 95.65%; }
#top .ig-link             { top: 96.3%; height: 1.5%; }

/* Category section (viewBox 1128 tall) */
.cat-page .lets-talk-underline { top: 89.2%; }
.cat-page .ig-link             { top: 87.3%; height: 2.4%; }

/* Project section — underline/IG are set per page via inline style
   (top:__UNDERLINE_TOP__% etc.) because each project SVG has its own viewBox
   height. No defaults here — the inline values win. */

/* =================================================================
   STRATA — clip the bottom of the main SVG (cropped paraphernalia +
   original footer) and append the full paraphernalia + footer.svg.
   The clip wrapper reduces the SVG's vertical footprint via
   aspect-ratio + overflow:hidden so the bottom region disappears
   without leaving an empty gap.
   ================================================================= */
.strata-main-clip {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 3700;
  overflow: hidden;
}
.strata-main-clip > svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
}
.strata-paraphernalia-wrap {
  position: relative;
  width: 100%;
}

/* Strata emblem video — replaces the static logo mockup (pattern4) in the
   upper section with an autoplaying loop. */
.strata-emblem-video {
  position: absolute;
  display: block;
  z-index: 4;
  object-fit: cover;
  background: #FFFFFF;
}
.strata-paraphernalia,
.strata-footer-svg {
  display: block;
  width: 100%;
  height: auto;
}
.strata-footer-inline {
  display: block;
  width: 100%;
  position: relative;
}
.strata-footer-inline > svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Recolor inlined footer for the light theme */
.theme-light .strata-footer-inline svg path { fill: #000000; }
.theme-light .strata-footer-inline svg line { stroke: #000000; }
.theme-light .strata-footer-inline svg rect { fill: #FFFFFF; }

/* =================================================================
   STRATA — "user journey" hover reveal.
   The page's embedded user-flow diagram is masked by a white cover;
   hovering the red-underlined "user journey" text reveals the user
   journey.svg in the same slot.
   ================================================================= */
.uj-zone {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background: transparent;
}
.uj-cover {
  position: absolute;
  z-index: 4;
  background: #FFFFFF;
  pointer-events: none;
}
.uj-popup {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.uj-popup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.uj-zone:hover ~ .uj-popup { opacity: 1; }

/* --- Safran du Liban: postfolio month tabs + draggable post carousel. --- */
.page-section[data-page="safran-du-liban"] .sdl-postfolio {
  position: absolute;
  left: 0; right: 0;
  top: 74.0%;
  height: 14.5%;
  background: #FFFFFF;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.page-section[data-page="safran-du-liban"] .sdl-months {
  display: flex;
  gap: 3vw;
  padding: 0.35vw 0 0.6vw 22.5%;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.87vw;
  letter-spacing: 0.02em;
  color: #000;
}
.page-section[data-page="safran-du-liban"] .sdl-month {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  font-weight: 400;
  transition: color 0.15s ease;
}
.page-section[data-page="safran-du-liban"] .sdl-month:hover { color: #555; }
.page-section[data-page="safran-du-liban"] .sdl-month.selected {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.28vw;
  text-decoration-thickness: 1.5px;
}
.page-section[data-page="safran-du-liban"] .sdl-carousel {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  padding: 0 5%;
}
.page-section[data-page="safran-du-liban"] .sdl-carousel.grabbing { cursor: grabbing; }
.page-section[data-page="safran-du-liban"] .sdl-carousel-track {
  display: flex;
  align-items: center;
  gap: 1vw;
  height: 100%;
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}
.page-section[data-page="safran-du-liban"] .sdl-carousel-track > * {
  height: 90%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
  pointer-events: none;
  background: #eee;
  border-radius: 2px;
}

/* --- Umami: looping video over the concept-sketch placeholder. --- */
.page-section[data-page="umami"] .umami-concept-video {
  position: absolute;
  left: 30.14%;
  top: 50.35%;
  width: 17.92%;
  height: 7.96%;
  object-fit: cover;
  z-index: 6;
  pointer-events: none;
}

/* =================================================================
   FRAME CYCLE — element marked [data-cycle] holds N children, only
   one has .active at a time. Used on drink-rise to shuffle the
   sachet and in-store-menu mockups in the packaging section.
   ================================================================= */
[data-cycle] {
  position: absolute;
  z-index: 4;
  overflow: hidden;
}
[data-cycle] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
[data-cycle] > img.active { opacity: 1; }

/* =================================================================
   THEME: LIGHT (applied to project detail pages)
   The detail SVGs are designed for a white background, so the fixed
   top-nav and the Let's-talk underline are recoloured here for legibility.
   ================================================================= */
.theme-light { background: #FFFFFF; color: #000000; }
.theme-light .top-nav { background: #FFFFFF; }
.theme-light .top-nav svg rect { fill: #FFFFFF; }
.theme-light .top-nav svg path { fill: #000000; }
.theme-light .lets-talk-underline { background: #000000; }

/* =================================================================
   PROJECT THUMBNAILS — per-image HTML overlays.
   On hover the image scales 1.08, a small label slides in next to it.
   Each .thumb gets its size/position via inline style (in viewBox %).
   ================================================================= */
.thumb {
  position: absolute;
  z-index: 6;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.25s ease;
  will-change: transform;
  display: block;
  text-decoration: none;
  color: inherit;
}
.thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.thumb-label {
  position: absolute;
  left: calc(100% + 0.7vw);
  top: 0;
  white-space: nowrap;
  color: #FFF9DF;
  font-family: 'Unbounded', sans-serif;
  line-height: 1.25;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.thumb-label strong {
  display: block;
  font-weight: 500;
  font-size: 0.97vw;
  letter-spacing: 0.01em;
}
.thumb-label span {
  display: block;
  font-weight: 300;
  font-size: 0.78vw;
  opacity: 0.85;
}
.thumb:hover { transform: scale(1.08); }
.thumb:hover .thumb-label {
  opacity: 1;
  transform: translateX(0);
}

/* =================================================================
   POSTER PAGE — full-page swap overlay per poster.
   Hover triggers placed exactly over each poster's rect position.
   ================================================================= */
.hover-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 4;
  background: #000;
  user-select: none;
}
.hover-zone {
  display: block;
  cursor: pointer;
  z-index: 8;
}
.cat-page[data-page="poster"] .hover-zone[data-reveal="p1"] { left: 7.57%;  top: 22.78%; width: 11.67%; height: 21.10%; }
.cat-page[data-page="poster"] .hover-zone[data-reveal="p2"] { left: 30.42%; top: 50.89%; width: 11.81%; height: 21.37%; }
.cat-page[data-page="poster"] .hover-zone[data-reveal="p3"] { left: 43.13%; top:  8.78%; width: 11.60%; height: 21.10%; }
.cat-page[data-page="poster"][data-hover="p1"] .hover-overlay.poster-1 { opacity: 1; }
.cat-page[data-page="poster"][data-hover="p2"] .hover-overlay.poster-2 { opacity: 1; }
.cat-page[data-page="poster"][data-hover="p3"] .hover-overlay.poster-3 { opacity: 1; }

/* Anchor markers used by smooth scroll */
.anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* =================================================================
   FOLLOW CURSOR (landing only — stacked preloaded images)
   ================================================================= */
.follow-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 121px;
  height: 151px;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.12s ease, transform 0.12s ease;
  will-change: transform, opacity;
}
.follow-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.follow-cursor .cursor-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.08s ease;
}
.follow-cursor .cursor-img.active { opacity: 1; }

/* =================================================================
   MASK OLD BAKED-IN FOOTER
   Each page's main design SVG has an outdated footer baked into its
   bottom ~218px (viewBox coords) — old typo email, Behance icon, etc.
   We cover it with a same-theme-colour block pinned to the bottom of
   the .page-section. The real, correct footer is added after
   </section> below. Strata handles its own clipping via
   .strata-main-clip and is excluded.
   ================================================================= */
.page-section[data-page="landing"]::after,
.page-section.cat-page::after,
.page-section.proj-page:not([data-page="strata"])::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 20;
}
.theme-light .page-section[data-page="landing"]::after,
.theme-light .page-section.cat-page::after,
.theme-light .page-section.proj-page:not([data-page="strata"])::after {
  background: #FFFFFF;
}
/* Slight over-mask to guarantee coverage of the baked-in top divider
   (design SVGs have <line y1="~top-of-old-footer">, subpixel-bleeds through
   an exact-fit mask). */
.page-section[data-page="landing"]::after { height: 9%; }
.page-section.cat-page::after             { height: 20%; }
.page-section.proj-page:not([data-page="strata"])::after { height: 7%; }

/* =================================================================
   SITE FOOTER — pinned to bottom of every page.
   External SVG (assets/components/footer-new.svg) so text/icons stay
   hot-swappable. Overlay anchors sit on top of the email + IG glyphs;
   LinkedIn is a non-anchor span (coming soon) already dimmed in-SVG.
   ================================================================= */
.site-footer {
  position: relative;
  z-index: 30;
  display: block;
  width: 100%;
  max-width: 1284px;
  margin: 0 auto 7vh;
  aspect-ratio: 1284 / 113;
  background: #000;
}
/* Top full-width divider + "Let's talk" underline, cream on dark. */
.site-footer::before,
.site-footer::after {
  content: '';
  position: absolute;
  background: #FFF9DF;
  pointer-events: none;
  z-index: 1;
}
.site-footer::before { top: -10%; left: 1.5%; right: 1.5%; height: 2px; }
/* "Let's talk" underline — animates left-to-right when the footer enters
   view. IntersectionObserver in each page toggles the `.drawn` class on
   any element with `data-underline`; we set that on <footer>. */
.site-footer::after  {
  top: 62%; left: 1.17%; width: 0; height: 3px;
  transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}
.site-footer.drawn::after { width: 25%; }
.theme-light .site-footer::before,
.theme-light .site-footer::after { background: #000000; }
.site-footer .footer-svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.site-footer .footer-hit {
  position: absolute;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background: transparent;
}
.site-footer a.footer-hit { cursor: pointer; }
.site-footer .footer-email    { left: 50.0%; top: 44%; width: 24%; height: 22%; }
.site-footer .footer-ig       { left: 78.0%; top: 44%; width: 4%;  height: 22%; }
.site-footer .footer-linkedin { left: 78.0%; top: 70%; width: 8%;  height: 22%; cursor: not-allowed; }

/* Light-theme variant (project detail pages): invert cream glyphs → black */
.theme-light .site-footer { background: #FFFFFF; }
.theme-light .site-footer .footer-svg { filter: brightness(0); }

/* =================================================================
   BACK-TO-TOP
   ================================================================= */
.back-to-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 99;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top svg { display: block; width: 48px; height: 49px; }
.back-to-top .arrow-hover { display: none; }
.back-to-top:hover .arrow-default { display: none; }
.back-to-top:hover .arrow-hover   { display: block; }