/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --ink:      #2D2140;
  --ink-strong:#11052E;
  --ink-soft: rgba(45, 33, 64, 0.7);
  --ink-minor:#808080;
  --ink-muted:#777777;
  --ink-faint:#999999;

  --accent:      #E1908B;
  --accent-dark: #C4736E;

  --white: #FFFFFF;
  --cream: #FAFAFA;
  --border-soft: #EDEDED;
  --tag-dot: #F1E8E7;

  --font-heading: 'Familjen Grotesk', -apple-system, sans-serif;
  --font-body: 'Familjen Grotesk', -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Progressive blur behind the header: 8 stacked layers, each blurrier than
   the last, masked into bands so the blur is strongest at the very top and
   fades to nothing at the bottom. No background, no border line. */
.header-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140%;
  z-index: -1;
  pointer-events: none;
}

.header-blur span {
  position: absolute;
  inset: 0;
}

/* White veil on top of the blur, solid at the top and fading out */
.header-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Case studies: blur only, no white veil over the coloured banner */
.header-blur--no-veil::after {
  display: none;
}

.header-blur span:nth-child(1) {
  backdrop-filter: blur(0.117px);
  -webkit-backdrop-filter: blur(0.117px);
  mask-image: linear-gradient(to top, transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%);
  -webkit-mask-image: linear-gradient(to top, transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%);
}

.header-blur span:nth-child(2) {
  backdrop-filter: blur(0.234px);
  -webkit-backdrop-filter: blur(0.234px);
  mask-image: linear-gradient(to top, transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%);
  -webkit-mask-image: linear-gradient(to top, transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%);
}

.header-blur span:nth-child(3) {
  backdrop-filter: blur(0.469px);
  -webkit-backdrop-filter: blur(0.469px);
  mask-image: linear-gradient(to top, transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%);
  -webkit-mask-image: linear-gradient(to top, transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%);
}

.header-blur span:nth-child(4) {
  backdrop-filter: blur(0.938px);
  -webkit-backdrop-filter: blur(0.938px);
  mask-image: linear-gradient(to top, transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%);
  -webkit-mask-image: linear-gradient(to top, transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%);
}

.header-blur span:nth-child(5) {
  backdrop-filter: blur(1.875px);
  -webkit-backdrop-filter: blur(1.875px);
  mask-image: linear-gradient(to top, transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%);
  -webkit-mask-image: linear-gradient(to top, transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%);
}

.header-blur span:nth-child(6) {
  backdrop-filter: blur(3.75px);
  -webkit-backdrop-filter: blur(3.75px);
  mask-image: linear-gradient(to top, transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%);
  -webkit-mask-image: linear-gradient(to top, transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%);
}

.header-blur span:nth-child(7) {
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  mask-image: linear-gradient(to top, transparent 75.0%, #000 87.5%, #000 100.0%);
  -webkit-mask-image: linear-gradient(to top, transparent 75.0%, #000 87.5%, #000 100.0%);
}

.header-blur span:nth-child(8) {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  mask-image: linear-gradient(to top, transparent 87.5%, #000 100.0%);
  -webkit-mask-image: linear-gradient(to top, transparent 87.5%, #000 100.0%);
}

.header-inner {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-strong);
  letter-spacing: -0.012em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-minor);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(45, 33, 64, 0.05);
}

.nav-link.is-current {
  color: var(--ink);
  background: rgba(45, 33, 64, 0.06);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-cta {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--accent);
  transition: border-color 0.25s var(--ease-out);
}

.nav-cta:hover {
  border-color: var(--accent-dark);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-full);
  transition: all 0.3s var(--ease-out);
}

.btn-contact:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  padding-top: 10rem;
  padding-bottom: 4rem;
}

.hero-inner {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 0.1s forwards;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-title {
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.016;
  color: var(--ink);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.hero-title strong {
  font-weight: 700;
}

.hero-title-soft {
  color: var(--ink-soft);
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-subtitle {
  font-size: 1rem;
  line-height: 1.3125;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
}

/* Small rounded label used in the hero and on the focus tags */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  line-height: 1.3125;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  background: var(--white);
  padding: 0.5rem 1rem;
  border: 0.5px solid var(--border-soft);
  border-radius: 32px;
  filter: drop-shadow(0 1px 3.35px rgba(121, 121, 121, 0.13));
}

.hero-visual {
  display: grid;
  place-items: center;
  aspect-ratio: 6 / 5;
  font-size: 1rem;
  color: #5F566E;
  background: #F6ECEA;
  border: 1.5px dashed rgba(196, 115, 110, 0.55);
  border-radius: 28px;
}

.hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.3125;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  background: var(--accent);
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-full);
  transition: all 0.3s var(--ease-out);
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(225, 144, 139, 0.35);
}

/* ============================================
   WORK
   ============================================ */
.work {
  padding: 0 0 6rem;
}

.work-block {
  padding-top: 0;
}

.work-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.work-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-minor);
}

.work-focus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.work-focus-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.work-tags li {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.3125;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  background: var(--white);
  padding: 0.5rem 0.75rem;
  border: 0.5px solid var(--border-soft);
  border-radius: 32px;
  box-shadow: 0 1px 3.35px rgba(121, 121, 121, 0.13);
  position: relative;
  cursor: help;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.work-tags li:hover,
.work-tags li:focus-visible {
  transform: rotate(var(--tilt, -3deg));
}

/* Soft colour blob before each tag label, revealed on hover / focus */
.work-tags li::before {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 15px;
  border-radius: 24px;
  background: var(--tag-dot);
  opacity: 0;
  transition: width 0.3s var(--ease-out), margin 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}

.work-tags li:hover::before,
.work-tags li:focus-visible::before {
  width: 33px;
  margin-left: -0.25rem;
  margin-right: 0.25rem;
  opacity: 1;
}

/* Tooltip shown on hover / keyboard focus / tap */
.work-tags li::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 280px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--white);
  background: var(--ink);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* Counter-rotate so the tooltip stays straight while the pill tilts */
.work-tags li:hover::after,
.work-tags li:focus::after {
  opacity: 1;
  transform: translateY(0) rotate(calc(var(--tilt, -3deg) * -1));
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.25rem 1.5rem;
}

.work-card {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.work-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.work-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.work-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.work-card:hover .work-card-image img {
  transform: scale(1.04);
}

.work-card-caption {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.1rem;
}

.work-card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
}

.work-card-kpi {
  color: var(--accent-dark);
  font-weight: 700;
}

.work-card-byline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  padding: 4rem 0;
  text-align: center;
}

.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-visual {
  width: 100%;
  max-width: 282px;
  margin-bottom: 2rem;
}

.contact-visual lottie-player {
  width: 100%;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: 418px;
}

/* ============================================
   WORK IN PROGRESS PAGE
   ============================================ */
.wip {
  min-height: calc(100vh - 6rem);
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  text-align: center;
}

.wip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wip-visual {
  width: 100%;
  max-width: 282px;
  margin-bottom: 2rem;
}

.wip-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-minor);
  margin-bottom: 1rem;
}

.wip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 520px;
  margin-bottom: 1rem;
}

.wip-text {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 420px;
  margin-bottom: 2rem;
}

.wip-back {
  transition: transform 0.3s var(--ease-out);
}

.wip-back:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .wip-title {
    font-size: 2rem;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 2rem 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  transition: background 0.3s ease, transform 0.3s var(--ease-out);
}

.social-link:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.footer--simple {
  border-top: 0;
}

/* Credit line on the home page footer */
.footer-credit {
  font-size: 0.75rem;
  line-height: 1.75;
  letter-spacing: -0.012em;
  color: var(--ink-minor);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }

  /* Comes after .container so its padding shorthand doesn't reset it */
  .header-inner {
    padding-top: calc(1.75rem + env(safe-area-inset-top));
    padding-bottom: 1.25rem;
  }

  .hero {
    padding-top: 7rem;
  }

  .hero-main {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    aspect-ratio: 16 / 9;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  /* Anchor tooltips to the whole list so they never run off-screen */
  .work-tags {
    position: relative;
  }

  .work-tags li,
  .work-tags li:hover,
  .work-tags li:focus-visible {
    position: static;
    transform: none;
  }

  .work-tags li::after {
    max-width: 100%;
  }

  .work-tags li:hover::after,
  .work-tags li:focus::after {
    transform: none;
  }

  .nav:not(.nav--always) {
    display: none;
  }

  .header-actions .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  }

  .mobile-nav.open {
    display: flex;
  }

  .mobile-nav-link {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .mobile-nav-contact {
    justify-content: center;
    margin-top: 0.75rem;
  }

  .footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.7rem;
  }

  .logo {
    font-size: 1rem;
  }
}