@import url('https://use.typekit.net/agu4vie.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ── Base ── */
html, body {
  font-family: 'Outfit', sans-serif;
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  background-color: var(--bg-light);
  color: var(--text-primary);
  font-kerning: normal;
}

*, *::before, *::after {
  font-family: 'Outfit', sans-serif;
}

input, button, textarea, select, p, a, span, label, li {
  font-family: 'Outfit', sans-serif;
}

/* ── Headers and Emphasized Text Use Comrade ── */
h1, h2, h3, h4, h5, h6 {
  font-family: "comrade", 'Outfit', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-kerning: normal;
}

em, i {
  font-family: "comrade", 'Outfit', sans-serif;
  font-style: normal;
  letter-spacing: 0;
}

/* ── Total OS Cursor Suppression on Pointer Devices (Custom Cursor Exclusive) ── */
@media (hover: hover) {
  html,
  body,
  *,
  *::before,
  *::after,
  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [role="link"],
  .btn,
  .tag,
  .carousel-btn,
  .carousel-slide,
  .project-card,
  .team-card,
  .nav__link,
  .nav__hamburger,
  .contact-social__icon-link,
  .showcase-back,
  .showcase-nav-btn {
    cursor: none !important;
  }
}

@media (hover: none) {
  *,
  *::before,
  *::after,
  html,
  body {
    cursor: auto !important;
  }
  .custom-cursor {
    display: none !important;
  }
}

/* ── Container ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ── Section Spacing ── */
.section        { padding-top: var(--space-xl);  padding-bottom: var(--space-xl);  }
.section--lg    { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

/* ── Color Scheme Utilities ── */
.bg-dark  { background-color: var(--mud);   color: var(--snow); }
.bg-light { background-color: var(--snow);  color: var(--mud);  }
.bg-apple { background-color: var(--apple); color: var(--snow); }
.bg-grass { background-color: var(--grass); color: var(--snow); }
.bg-sky   { background-color: var(--sky);   color: var(--snow); }

/* ══════════════════════════════════════════
   NAVIGATION
   Fixed nav follows the scroll (Hoodzpah style).
   No outline / border line.
   Color automatically inverts/adapts depending
   on the background section behind it.
══════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background-color: var(--nav-bg);
  border: none;
  outline: none;
  box-shadow: none;
  pointer-events: auto;

  /* Default colour tokens (Apple red-orange bar with Snow text) */
  --nav-bg: var(--apple);
  --nav-fg: var(--snow);
  --nav-logo-filter: none;
  transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

/* ── Palette-aware themes (dynamically set via data-nav-theme by nav.js) ── */

/* Over White / Cream (Snow) sections → Yellow (Sun) nav bar with Brown (Mud) text & logo */
.nav[data-nav-theme="light"] {
  --nav-bg: var(--sun);
  --nav-fg: var(--mud);
  --nav-logo-filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(1400%) hue-rotate(24deg) brightness(95%) contrast(98%);
}

/* Over Brown (Mud) sections → Red-Orange (Apple) nav bar with White/Cream (Snow) text & logo */
.nav[data-nav-theme="mud"],
.nav[data-nav-theme="dark"] {
  --nav-bg: var(--apple);
  --nav-fg: var(--snow);
  --nav-logo-filter: none;
}

/* Over Green (Grass) hero section → Brown (Mud) nav bar with White/Cream (Snow) text & logo */
.nav[data-nav-theme="grass"] {
  --nav-bg: var(--mud);
  --nav-fg: var(--snow);
  --nav-logo-filter: none;
}

/* Over Red-Orange (Apple) CTA sections → Brown (Mud) nav bar with Yellow (Sun) text & logo */
.nav[data-nav-theme="apple"] {
  --nav-bg: var(--mud);
  --nav-fg: var(--sun);
  --nav-logo-filter: brightness(0) saturate(100%) invert(86%) sepia(28%) saturate(708%) hue-rotate(345deg) brightness(96%) contrast(91%);
}

/* Over Blue (Sky) sections → Yellow (Sun) nav bar with Brown (Mud) text & logo */
.nav[data-nav-theme="sky"] {
  --nav-bg: var(--sun);
  --nav-fg: var(--mud);
  --nav-logo-filter: brightness(0) saturate(100%) invert(18%) sepia(35%) saturate(1400%) hue-rotate(24deg) brightness(95%) contrast(98%);
}

.nav__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-pad);
}

/* ── Logo ── */
.nav__logo {
  display: flex;
  align-items: center;
  height: 42px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.nav__logo:hover { opacity: 0.75; }

.nav__logo img,
.nav__logo svg {
  height: 100%;
  width: auto;
  max-height: 42px;
  object-fit: contain;
  filter: var(--nav-logo-filter);
  transition: filter 0.3s ease;
}

/* Text fallback */
.nav__logo-text {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--nav-fg);
  transition: color 0.3s ease;
}

/* ── Desktop Links ── */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__link {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-fg);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--nav-fg);
  transition: width var(--transition-base), background-color 0.3s ease;
}

.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

/* ── Hamburger (mobile) ── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: none;
  padding: 0;
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--nav-fg);
  transition: transform var(--transition-base), opacity var(--transition-fast), background-color 0.3s ease;
  transform-origin: center;
}

.nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Menu Overlay ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--mud);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--container-pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mobile-menu__link {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--snow);
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: color var(--transition-fast);
}

.mobile-menu__link:hover { color: var(--apple); }

.mobile-menu__footer {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--container-pad);
  right: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mobile-menu__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--snow);
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.mobile-menu__social a svg {
  width: 20px;
  height: 20px;
  display: block;
}

.mobile-menu__social a:hover {
  opacity: 1;
  color: var(--apple);
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background-color: var(--mud);
  color: var(--snow);
  padding: var(--space-lg) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__brand {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__copy {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-xs);
  opacity: 0.5;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--snow);
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.footer__social a svg {
  width: 20px;
  height: 20px;
  display: block;
}

.footer__social a:hover {
  opacity: 1;
  color: var(--apple);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════
   CUSTOM CURSOR (using cursor.svg)
   Color automatically inverts/adapts depending
   on the background section beneath it (matching brand palette).
══════════════════════════════════════════ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  width: 32px;
  height: 38px;
  transform: translate(-50%, -50%);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s ease;
  will-change: transform;
  color: var(--snow); /* Default color */
}

.custom-cursor svg,
.custom-cursor__svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-cursor svg path {
  fill: currentColor;
  transition: fill 0.25s ease;
}

/* ── Palette-Aware Theme Colors for Cursor ── */

/* Light sections (Snow or Sun bg) → Mud dark cursor */
.custom-cursor[data-cursor-theme="light"] {
  color: var(--mud);
}

/* Dark Mud sections → Snow light cursor */
.custom-cursor[data-cursor-theme="mud"],
.custom-cursor[data-cursor-theme="dark"] {
  color: var(--snow);
}

/* Grass olive-green sections (Hero) → Snow light cursor */
.custom-cursor[data-cursor-theme="grass"] {
  color: var(--snow);
}

/* Apple vibrant orange sections → Sun-yellow punchy cursor */
.custom-cursor[data-cursor-theme="apple"] {
  color: var(--sun);
}

/* Sky slate-blue sections → Snow light cursor */
.custom-cursor[data-cursor-theme="sky"] {
  color: var(--snow);
}

/* Hover enlarge state on interactive elements */
.custom-cursor.is-hovering {
  width: 46px;
  height: 54px;
}

.custom-cursor.is-hovering .custom-cursor__svg {
  transform: scale(1.1) rotate(12deg);
}

@media (hover: none) {
  .custom-cursor { display: none !important; }
}

/* ══════════════════════════════════════════
   SHARED COMPONENTS
══════════════════════════════════════════ */

/* ── Page Header ── */
.page-header {
  padding-top: calc(var(--nav-height) + var(--space-lg));
  padding-bottom: var(--space-lg);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  background-color: var(--mud);
  color: var(--snow);
}

.page-header__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-sm);
}

.page-header__title {
  font-family: "comrade", 'Outfit', sans-serif;
  font-size: clamp(3.75rem, 12vw, 9.5rem);
  font-weight: 700;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: 0;
  font-kerning: normal;
}

.page-header__title em {
  font-family: "comrade", 'Outfit', sans-serif;
  font-style: normal;
  color: var(--apple);
}

/* ── Buttons (Background-Free) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  border-radius: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover { transform: translateX(4px); }

.btn--dark {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mud);
  border: none;
}
.btn--dark:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--apple);
}

.btn--light {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--snow);
  border: none;
}
.btn--light:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--apple);
}

.btn--outline {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mud);
  border: none;
}
.btn--outline:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--apple);
}

.btn--outline-light {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--snow);
  border: none;
}
.btn--outline-light:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--apple);
}

/* ── Custom Brand Arrows ── */
.custom-arrow {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  height: 0.8em;
  width: auto;
  flex-shrink: 0;
  transition: transform var(--transition-fast), fill var(--transition-fast);
}

.custom-arrow--right,
.custom-arrow--left {
  aspect-ratio: 250 / 110;
}

.custom-arrow--down {
  aspect-ratio: 272 / 124;
}

.btn__arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  transition: transform var(--transition-fast);
}

.btn__arrow .custom-arrow {
  height: 0.72em;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ── Tags ── */
.tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-family: 'Outfit', sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apple);
  background-color: rgba(204, 89, 25, 0.12);
  border: none;
  border-radius: 0;
}

/* ══════════════════════════════════════════
   PAGE TRANSITION
══════════════════════════════════════════ */
body { animation: pageFadeIn 0.3s ease forwards; }

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--snow); }
::-webkit-scrollbar-thumb { background: var(--mud); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--grass); }

/* ══════════════════════════════════════════
   SCROLL REVEAL / FADE-IN ANIMATIONS
══════════════════════════════════════════ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay helpers for children in grids / lists */
.reveal-stagger > *:nth-child(1),
.studio-services__grid > *:nth-child(1),
.studio-values__grid > *:nth-child(1),
.studio-team__grid > *:nth-child(1),
.work-grid > *:nth-child(1) { transition-delay: 0.05s; }

.reveal-stagger > *:nth-child(2),
.studio-services__grid > *:nth-child(2),
.studio-values__grid > *:nth-child(2),
.studio-team__grid > *:nth-child(2),
.work-grid > *:nth-child(2) { transition-delay: 0.12s; }

.reveal-stagger > *:nth-child(3),
.studio-services__grid > *:nth-child(3),
.studio-values__grid > *:nth-child(3),
.work-grid > *:nth-child(3) { transition-delay: 0.19s; }

.reveal-stagger > *:nth-child(4),
.studio-services__grid > *:nth-child(4),
.studio-values__grid > *:nth-child(4),
.work-grid > *:nth-child(4) { transition-delay: 0.26s; }

.reveal-stagger > *:nth-child(5),
.studio-services__grid > *:nth-child(5),
.work-grid > *:nth-child(5) { transition-delay: 0.33s; }

.reveal-stagger > *:nth-child(6),
.studio-services__grid > *:nth-child(6),
.work-grid > *:nth-child(6) { transition-delay: 0.40s; }

.reveal-stagger > *:nth-child(7),
.work-grid > *:nth-child(7) { transition-delay: 0.47s; }

.reveal-stagger > *:nth-child(8),
.work-grid > *:nth-child(8) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}