/* ==========================================================================
   FRAEK PORTFOLIO - MAIN DESIGN SYSTEM & STYLESHEET
   Cloned & Enhanced from nithinmwarrier.com with Fraek Branding
   ========================================================================== */

@font-face {
  font-family: 'Super Theory';
  src: url('../Super Theory.ttf') format('truetype'),
       url('../super-theory/Super Theory.ttf') format('truetype'),
       url('Super Theory.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Praise';
  src: url('../praise/Praise.otf') format('opentype'),
       url('praise/Praise.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soonday';
  src: url('../soonday/Soonday TTF Personal.ttf') format('truetype'),
       url('soonday/Soonday TTF Personal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Transcity';
  src: url('../transcity/Transcity DEMO.otf') format('opentype'),
       url('transcity/Transcity DEMO.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Summer Stussy';
  src: url('../summer-stussy-demo/Summer Stussy DEMO.otf') format('opentype'),
       url('summer-stussy-demo/Summer Stussy DEMO.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800;900&family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Exact Colors from freakcolorpallet.png */
  --color-sunshine: #FFCA26;
  --color-cream: #F3E8CC;
  --color-carrot: #F86015;
  --color-tomato: #D42518;
  --color-forest: #19532B;
  --color-kiwi: #9ABC04;

  /* Theme System - Black elements (#242424) strictly preserved */
  --bg-light: #F3E8CC;         /* CREAM */
  --bg-dark: #242424;          /* Black - Unchanged */
  --bg-card: #E8DCC0;
  --accent-yellow: #9ABC04;     /* KIWI */
  --accent-blue: #F86015;       /* CRISP CARROT */
  --accent-orange: #F86015;     /* CRISP CARROT */
  --accent-red: #D42518;        /* TOMATO BURST */
  --accent-green: #19532B;      /* FOREST GREEN */
  --accent-kiwi: #9ABC04;       /* KIWI */
  --text-dark: #242424;        /* Black - Unchanged */
  --text-muted: #5E5645;
  --text-light: #F3E8CC;
  --border-color: #D3C4A0;
  --border-light: #E4D7B9;
  --font-display: 'Summer Stussy', cursive, sans-serif;
  --font-serif: 'Summer Stussy', cursive, serif;
  --font-body: 'Summer Stussy', cursive, sans-serif;
  --font-mono: 'Summer Stussy', 'Space Grotesk', monospace;
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  cursor: default;
}

/* Selection */
::selection {
  background-color: var(--accent-yellow);
  color: var(--text-dark);
}

/* Fixed Grid Vertical Guidelines */
.grid-line {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--border-color);
  z-index: 90;
  pointer-events: none;
  opacity: 0.6;
}

.grid-line-left {
  left: 5%;
}

.grid-line-right {
  right: 5%;
}

@media (max-width: 768px) {
  .grid-line-left { left: 16px; }
  .grid-line-right { right: 16px; }
}

/* Custom Interactive Cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--accent-yellow);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.custom-cursor.active {
  width: 130px;
  height: 130px;
  background-color: rgba(36, 36, 36, 0.95);
  color: #ffffff;
  border: 1px solid var(--accent-yellow);
}

.custom-cursor.active-pill {
  width: 140px;
  height: 44px;
  border-radius: 22px;
  background-color: var(--accent-blue);
  color: #ffffff;
}

/* Floating Award Badge (Side fixed) */
.badge-fixed {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--text-dark);
  color: #fff;
  padding: 16px 8px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}

.badge-fixed:hover {
  background-color: var(--accent-yellow);
  color: var(--text-dark);
  transform: translateY(-50%) translateX(-4px);
}

/* Navigation Bar. The <header> wrapper must stay a zero-height box: the navbar
   inside it is fixed, so any box of its own only pushes the page down — which
   on small screens shifted the full-height hero and hid its wave. */
header {
  height: 0;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  pointer-events: none;
}

.nav-brand {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-dark);
}

.nav-brand img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.nav-brand-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-links {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(247, 241, 237, 0.85);
  backdrop-filter: blur(12px);
  padding: 10px 24px;
  border-radius: 40px;
  border: 1px solid rgba(172, 172, 172, 0.5);
}

.nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--text-dark);
  transition: width 0.2s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* The page you are already on keeps its underline drawn */
.nav-link.is-current {
  font-weight: 700;
}

.nav-link.is-current::after {
  width: 100%;
}

.nav-cta {
  pointer-events: auto;
  background-color: var(--text-dark);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1.2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-cta:hover {
  background-color: var(--accent-yellow);
  color: var(--text-dark);
  transform: translateY(-2px);
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: #efe4c2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 4% 80px 4%;
  overflow: hidden;
  z-index: 10;
}

/* svh is the viewport with the mobile browser's toolbars showing, so the hero
   ends where the screen actually ends and its wave stays visible. */
@supports (min-height: 100svh) {
  .hero-section {
    min-height: 100svh;
  }
}

.hero-grid-bg {
  display: none;
}

.hero-tentacle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.hero-wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  overflow: hidden;
  line-height: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-wave-svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100%;
}

.hero-top-info {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 2%;
  margin-top: 10px;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-forest);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-forest);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.hero-center-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 16px;
}

/* Screen Reader Only Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero Vector Logo (from logo.html) */
.hero-logo-stage {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  perspective: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero-logo-wrap {
  width: 100%;
  max-width: 940px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0)
            rotateX(calc(var(--my, 0) * -0.03deg))
            rotateY(calc(var(--mx, 0) * 0.035deg));
  transition: transform 80ms linear;
  margin: 0 auto;
}

.hero-logo-wave {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.hero-logo-stage svg {
  display: block;
  width: 100%;
  max-width: 920px;
  max-height: 54vh;
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: filter, transform;
  animation: breath 5.5s ease-in-out infinite;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08));
  margin: 0 auto;
  pointer-events: none;
}

.hero-logo-stage video,
.hero-logo-video {
  display: block;
  width: 100%;
  max-width: 960px;
  max-height: 62vh;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  mix-blend-mode: multiply;
  background: transparent;
  pointer-events: none;
  animation: breath 5.5s ease-in-out infinite;
}

/* Desktop only. The logo is a square video sitting in a much wider box, so the
   height cap — not the width — is what actually sizes it, and 62vh left it
   reading small on a full-size screen. Tablet and phone are width-bound and
   already sized right, so they keep the cap above. */
@media (min-width: 1025px) {
  .hero-logo-stage video,
  .hero-logo-video {
    max-height: 72vh;
  }
}

/* Subtle continuous breath across the hero logo */
@keyframes breath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.005); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-stage svg,
  .hero-logo-stage video,
  .hero-logo-video,
  .hero-logo-wrap,
  .hero-logo-wave {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .works-rail-track,
  .gallery-slide {
    transform: none !important;
  }
}

.hero-title-container {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  text-transform: uppercase;
  margin: 0;
  user-select: none;
  display: flex;
  justify-content: center;
  gap: 0.06em;
  position: relative;
  z-index: 3;
}

.hero-title span {
  display: inline-block;
  position: relative;
  color: var(--text-dark);
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease, opacity 0.3s ease;
  will-change: text-shadow, transform, opacity;
}

.hero-title span:hover {
  transform: translateY(-12px) scale(1.05);
  color: rgba(248, 96, 21, 0.85);
}

.hero-brand-logo-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  margin-bottom: 0;
  flex-shrink: 0;
}

.hero-logo-img {
  max-width: 220px;
  width: auto;
  height: clamp(3.5rem, 12vw, 11rem);
  max-height: 170px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.08));
}

.hero-lines-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0 auto;
  position: relative;
}

.hero-line-left, .hero-line-right {
  flex: 1;
  height: 1px;
  background-color: var(--border-color);
}

.hero-subtitle-badge {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-dark);
  background-color: var(--accent-yellow);
  padding: 8px 24px;
  border-radius: 30px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* Roles Showcase Bar Section */
.sticky-roles-section {
  position: relative;
  height: auto;
  padding: 35px 0;
  background-color: var(--bg-light);
  z-index: 15;
}

.sticky-roles-container {
  position: relative;
  width: 100%;
  padding: 0 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.role-pill {
  background-color: var(--text-dark);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: 1px;
  padding: 14px 32px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease;
}

.role-pill:nth-child(2) {
  background-color: var(--accent-yellow);
  color: var(--text-dark);
}

.role-pill:hover {
  transform: scale(1.08);
}



/* Philosophy & Text Animation Section */
.philosophy-section {
  position: relative;
  padding: 160px 7%;
  background-color: var(--bg-light);
  z-index: 25;
  overflow: hidden;
}

.philosophy-top {
  border-top: 1px solid var(--border-color);
  padding-top: 60px;
  margin-bottom: 40px;
}

.philosophy-sub {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 800px;
}

.philosophy-big-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 50px;
}

.stack-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  transition: color 0.3s ease;
  cursor: pointer;
  width: fit-content;
  text-align: center;
  will-change: transform, text-shadow;
}

.stack-title:hover {
  color: var(--accent-orange);
}

/* Curated Projects (Works Section) */
.works-section {
  position: relative;
  padding: 120px 5%;
  background-color: var(--bg-light);
  z-index: 30;
  border-top: 1px solid var(--border-color);
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px auto;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Live Site Rail — scroll-driven horizontal gallery.
   The page's own downward scroll drives the horizontal travel: a tall spacer
   (.works-rail) gives the section its scroll distance, a sticky stage holds the
   frames still while that distance is consumed, and JS maps scroll progress to
   one translate on the track. No wheel hijacking, no drag — it is the same
   scroll gesture the rest of the page uses.

   Each slide is a device: data-view="desktop" is a 16:9 browser at a 1440x810
   viewport, data-view="mobile" is a 9:16 phone at 420x747, so every project is
   framed in the shape it was designed for.
   -------------------------------------------------------------------------- */
.works-rail {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.works-rail-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.works-rail-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: 0 max(5vw, 40px);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Each slide owns its compositor layer, so moving the rail is a layer shift
   rather than a repaint of several embedded documents. */
.gallery-slide {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: var(--text-dark);
  transform: translate3d(0, calc(var(--slide-offset, 0) * 1vh), 0);
  will-change: transform;
  --card-a: var(--accent-green);
  --card-b: var(--accent-kiwi);
}

.gallery-slide-device {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #1b1b1b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.5s ease;
}

.gallery-slide:hover .gallery-slide-device {
  transform: translateY(-8px);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28);
}

.gallery-slide:focus-visible .gallery-slide-device {
  outline: 3px solid var(--accent-orange);
  outline-offset: 4px;
}

/* Desktop device — browser chrome over a 16:9 screen */
.gallery-slide[data-view="desktop"] .gallery-slide-device {
  border-radius: 12px;
}

.gallery-slide[data-view="desktop"] .gallery-slide-screen {
  height: clamp(240px, 44vh, 520px);
  aspect-ratio: 16 / 9;
}

/* Mobile device — notch over a 9:16 screen */
.gallery-slide[data-view="mobile"] .gallery-slide-device {
  border-radius: 34px;
  padding: 8px;
  background-color: #101010;
}

.gallery-slide[data-view="mobile"] .gallery-slide-screen {
  height: clamp(360px, 62vh, 720px);
  aspect-ratio: 9 / 16;
  border-radius: 26px;
}

.gallery-slide-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 30px;
  padding: 0 14px;
  background-color: #262626;
  flex-shrink: 0;
}

.gallery-slide[data-view="mobile"] .gallery-slide-chrome {
  height: 18px;
  justify-content: center;
  background-color: transparent;
  padding: 0;
}

.chrome-dots {
  display: inline-flex;
  gap: 6px;
}

.chrome-dots::before,
.chrome-dots::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #4a4a4a;
}

.chrome-dots::before {
  box-shadow: -15px 0 0 #F86015;
  margin-left: 15px;
}

.chrome-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(243, 232, 204, 0.6);
}

.chrome-notch {
  width: 74px;
  height: 6px;
  border-radius: 6px;
  background-color: #2f2f2f;
}

.gallery-slide-screen {
  position: relative;
  overflow: hidden;
  background-color: #E0DAD5;
  contain: paint;
}

/* Designed cover plate — sits behind the embed and stands in on its own for
   sites that refuse framing and have no local poster. */
.gallery-slide-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(45deg, rgba(243, 232, 204, 0.06) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--card-a) 0%, var(--card-b) 100%);
}

.gallery-slide-plate::before {
  content: attr(data-monogram);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(243, 232, 204, 0.9);
}

.gallery-slide-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Screenshot of the live site, captured at this device's own viewport, so it
   fills the screen exactly. Inert by design: the whole slide is the link. */
.gallery-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-shot.is-loaded {
  opacity: 1;
}

/* Flat tint rather than mix-blend-mode: blending over a live embed forces the
   whole slide out of the compositor's fast path. */
.gallery-slide-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(255, 202, 38, 0.24);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-slide:hover .gallery-slide-tint {
  opacity: 1;
}

.gallery-slide .project-live {
  z-index: 3;
  top: 12px;
  left: 12px;
  font-size: 10px;
  padding: 4px 10px 4px 8px;
  pointer-events: none;
}

/* Caption reads as page content, not as an overlay on a separate widget. */
.gallery-slide-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 6px 14px;
  padding-top: 4px;
  max-width: 100%;
}

.gallery-slide-index {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.gallery-slide-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-slide-tag {
  grid-column: 2 / 3;
  grid-row: 2;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gallery-slide-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: 22px;
  height: 22px;
  stroke: var(--text-dark);
  transition: transform 0.3s ease;
}

.gallery-slide:hover .gallery-slide-arrow {
  transform: translate(4px, -4px);
}

/* Closing panel — the rail ends on page content, not on a cut-off frame. */
.gallery-slide-end {
  justify-content: center;
  gap: 14px;
  width: clamp(280px, 26vw, 420px);
  height: clamp(240px, 44vh, 520px);
  padding: 40px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--bg-card);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.gallery-slide-end:hover {
  background-color: var(--accent-yellow);
  border-color: var(--text-dark);
}

.gallery-end-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--text-muted);
}

.gallery-end-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.gallery-end-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.gallery-end-cta svg {
  width: 16px;
  height: 16px;
}

/* Progress line — shows how much of the rail the current scroll has consumed. */
.works-rail-progress {
  position: absolute;
  left: max(5vw, 40px);
  right: max(5vw, 40px);
  bottom: 6vh;
  height: 2px;
  background-color: rgba(36, 36, 36, 0.12);
}

.works-rail-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background-color: var(--accent-orange);
  transform-origin: left center;
}

/* Static fallback — touch and reduced-motion visitors get the same rail as a
   native horizontal scroller, which is already smooth and needs no scripting. */
.works-rail.is-static {
  height: auto !important;
}

.works-rail.is-static .works-rail-stage {
  position: static;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 22px 0;
}

.works-rail.is-static .works-rail-track {
  transform: none !important;
  will-change: auto;
  gap: 22px;
  padding: 0 22px;
}

.works-rail.is-static .gallery-slide {
  transform: none !important;
  scroll-snap-align: center;
}

.works-rail.is-static .works-rail-progress {
  display: none;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  position: relative;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--text-dark);
}

.project-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #E0DAD5;
  --card-a: var(--accent-green);
  --card-b: var(--accent-kiwi);
}

/* Designed cover plate — sits behind the live embed, and stands in on its own
   for sites that block framing and have no local poster image. */
.project-image-wrapper::before {
  content: attr(data-monogram);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(243, 232, 204, 0.06) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, var(--card-a) 0%, var(--card-b) 100%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(243, 232, 204, 0.9);
  z-index: 0;
}

.project-image-wrapper::after {
  content: attr(data-label);
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 232, 204, 0.75);
}

/* Live embed stage — holds either a scaled desktop iframe of the real site
   or a screenshot fallback. Never interactive: the whole card is the link. */
.project-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card:hover .project-stage {
  transform: scale(1.04);
}

.project-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform-origin: top left;
  transform: scale(var(--frame-scale, 0.42));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-color: transparent;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-frame.is-loaded,
.project-image.is-loaded {
  opacity: 1;
}

/* Live-site badge */
.project-live {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 20px;
  background-color: var(--bg-light);
  border: 1px solid var(--text-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dark);
}

.project-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-red);
  box-shadow: 0 0 0 0 rgba(212, 37, 24, 0.6);
  animation: livePulse 2s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 37, 24, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(212, 37, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 37, 24, 0); }
}

.project-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--accent-yellow);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.project-card:hover .project-overlay {
  opacity: 0.25;
}

.project-info {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  background-color: var(--bg-card);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 6px;
}

.project-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.project-year {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 10px;
  border-radius: 20px;
}

.project-domain {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.75;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.project-card:hover .project-domain {
  color: var(--accent-orange);
  opacity: 1;
}

.project-tags {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.project-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--text-dark);
  transition: transform 0.3s ease;
}

.project-card:hover .project-arrow {
  transform: translate(4px, -4px);
}

/* Secondary Archive Grid + Explore More Control */
.projects-grid-more {
  margin-top: 32px;
}

.projects-grid-more[hidden] {
  display: none;
}

.projects-grid-more .project-card {
  opacity: 0;
  transform: translateY(24px);
  animation: cardRise 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.projects-grid-more .project-card:nth-child(2) { animation-delay: 0.08s; }
.projects-grid-more .project-card:nth-child(3) { animation-delay: 0.16s; }

@keyframes cardRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Capabilities Accordion / Services Section */
.capabilities-section {
  padding: 120px 7%;
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-color);
  z-index: 35;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}

@media (max-width: 850px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.capabilities-left-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 120px;
}

.capability-item {
  border-bottom: 1px solid var(--border-color);
  padding: 32px 0;
}

.capability-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.capability-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
}

.capability-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
  margin-left: 24px;
}

.capability-toggle {
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.capability-item.active .capability-toggle {
  transform: rotate(45deg);
}

.capability-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, margin-top 0.4s ease;
}

.capability-item.active .capability-body {
  max-height: 300px;
  margin-top: 20px;
}

.faq-text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.capability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cap-tag {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-dark);
}

/* Footer & CTA Section */
.footer-section {
  position: relative;
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding: 140px 7% 60px 7%;
  z-index: 40;
  overflow: hidden;
}

.footer-top {
  text-align: center;
  margin-bottom: 100px;
}

.footer-cta-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 40px;
  transition: color 0.3s ease;
}

.footer-cta-title:hover {
  color: var(--accent-yellow);
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: var(--accent-yellow);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 50px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 232, 98, 0.3);
}

.footer-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
  background-color: #ffffff;
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 40px;
  flex-wrap: wrap;
  gap: 24px;
}

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

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-socials {
  display: flex;
  gap: 14px;
}

/* Icon buttons: a 42px circle is a comfortable tap target, and the mark itself
   is drawn in currentColor so hover only has to change one thing. */
.footer-social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer-social-link:hover {
  color: var(--text-dark);
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  transform: translateY(-2px);
}

/* Placeholder social slot — no destination yet, so it is not clickable */
.footer-social-link.is-pending {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Back to Top Button */
.back-to-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
  background-color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  color: var(--text-dark);
  transform: translateY(-4px);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OPTIMIZATIONS
   PC view is strictly preserved. Only max-width: 768px and max-width: 480px are adjusted.
   ========================================================================== */

/* Disable desktop custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

@media (max-width: 768px) {
  .navbar {
    gap: 12px;
    padding: 20px 5%;
  }

  .nav-brand-text {
    font-size: 16px;
  }

  .nav-brand img {
    width: 26px;
    height: 26px;
  }

  .nav-links {
    gap: 14px;
    padding: 7px 14px;
  }

  .nav-link {
    font-size: 12px;
    letter-spacing: 0.3px;
  }

  .nav-cta {
    padding: 7px 16px;
    font-size: 11px;
  }

  .hero-section {
    padding: 110px 4% 36px 4%;
    min-height: 100vh;
  }

  .hero-top-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 4px;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 11px;
  }

  .hero-meta {
    font-size: 11px;
    gap: 6px;
  }

  .hero-brand-logo-container {
    margin-bottom: 8px;
  }

  .hero-logo-img {
    max-width: 200px;
    width: 55vw;
    max-height: 100px;
  }

  .hero-title-container {
    margin-top: 10px;
  }

  .hero-title {
    font-size: clamp(2.5rem, 15vw, 5rem);
    letter-spacing: -0.03em;
  }

  .hero-lines-row {
    margin-top: 12px;
  }

  .hero-subtitle-badge {
    font-size: 11px;
    padding: 6px 14px;
    letter-spacing: 1px;
  }

  .hero-wave-divider {
    height: 58px;
  }

  .philosophy-section {
    padding: 70px 5%;
  }

  .philosophy-sub {
    font-size: clamp(1rem, 3.8vw, 1.3rem);
  }

  .philosophy-big-stack {
    margin-top: 20px;
  }

  .stack-title {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    padding: 10px 0;
  }

  .works-section {
    padding: 70px 5%;
  }

  .section-header {
    margin-bottom: 32px;
  }

  .section-title {
    font-size: clamp(1.7rem, 4.8vw, 2.3rem);
  }

  .section-subtitle {
    font-size: 17px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .works-rail.is-static .works-rail-track {
    gap: 16px;
    padding: 0 16px;
  }

  /* Phone-sized screens: size the devices from the viewport width so a whole
     frame plus its caption fits inside one snap position. Height follows from
     each device's aspect ratio. */
  .gallery-slide[data-view="desktop"] .gallery-slide-screen {
    height: auto;
    width: min(82vw, 460px);
  }

  .gallery-slide[data-view="mobile"] .gallery-slide-screen {
    height: auto;
    width: min(58vw, 300px);
  }

  .gallery-slide-end {
    width: 74vw;
    height: auto;
    min-height: 210px;
    padding: 24px;
  }

  .gallery-slide-name {
    font-size: 1.2rem;
  }

  .gallery-slide-tag {
    font-size: 14px;
  }

  .gallery-slide-index {
    font-size: 13px;
  }

  .project-info {
    padding: 18px 20px;
  }

  .project-name {
    font-size: 1.25rem;
  }

  .project-tags {
    font-size: 12px;
    padding-top: 12px;
  }

  .project-domain {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .project-live {
    top: 12px;
    left: 12px;
    font-size: 10px;
    padding: 4px 10px 4px 8px;
  }

  .projects-grid-more {
    margin-top: 24px;
  }

  .capabilities-section {
    padding: 70px 5%;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .capabilities-left-title {
    position: static;
    font-size: clamp(1.7rem, 4.8vw, 2.3rem);
  }

  .capability-item {
    padding: 20px 0;
  }

  .capability-title {
    font-size: 1.1rem;
    margin-left: 12px;
  }

  .cap-tag {
    font-size: 11px;
    padding: 5px 12px;
  }

  .footer-section {
    padding: 80px 5% 36px 5%;
  }

  .footer-top {
    margin-bottom: 50px;
  }

  .footer-cta-title {
    font-size: clamp(2.2rem, 10vw, 4.2rem);
    margin-bottom: 24px;
  }

  .footer-cta-btn {
    padding: 14px 28px;
    font-size: 0.95rem;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding-top: 24px;
  }

  .footer-socials {
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Phone nav. The mark carries the brand on its own here, so it gets the room
     the wordmark gives up, and the pill and CTA are sized to stay tappable
     rather than shrinking to fit — all three still clear 320px. */
  .navbar {
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 10px;
  }

  .nav-brand img {
    width: 34px;
    height: 34px;
  }

  .nav-brand-text {
    display: none;
  }

  .nav-links {
    gap: 14px;
    padding: 9px 16px;
  }

  .nav-link {
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .nav-cta {
    padding: 9px 16px;
    font-size: 12px;
  }

  .hero-section {
    padding: 105px 14px 30px 14px;
  }

  .hero-top-info {
    margin-top: 0;
    margin-bottom: 12px;
  }

  .hero-logo-stage,
  .hero-logo-wrap {
    width: 100%;
    max-width: 100%;
  }

  .hero-subtitle-badge {
    font-size: 10px;
    padding: 5px 12px;
    letter-spacing: 1px;
  }

  .philosophy-section,
  .works-section,
  .capabilities-section {
    padding: 50px 14px;
  }

  .project-info {
    padding: 16px;
  }

  .footer-section {
    padding: 60px 14px 28px 14px;
  }

  .footer-cta-title {
    font-size: clamp(1.8rem, 11vw, 3rem);
  }
}