@font-face {
  font-family: 'Geist';
  src: url('assets/GeistVF.woff2') format('woff2-variations'),
       url('assets/GeistVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lastik';
  src: url('assets/LastikFreeFont-Free.woff2') format('woff2'),
       url('assets/LastikFreeFont-Free.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --dark: #1a1a1c;
  --light: #fdfcf9;
  --dark-hover: #2a2a2d;
  --light-hover: #e1ded6;
  --bg: var(--dark);
  --cream: var(--light);
  --bg-hover: var(--dark-hover);
  --cream-hover: var(--light-hover);
  --card-bg: #f5f3ee;
  --margin: 20px;
  --line1: 24.4604%;
  --line2: 48.7994%;
  --nav-h: 61px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 350;
}

body.no-scroll {
  overflow: hidden;
}

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

img {
  display: block;
}

.page {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- layout shell ----
   Base = tablet (768–1023px): a simple 20px margin, no column grid.
   The 12-column grid kicks in at web (1024px+), see media query below. */
.shell {
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.cols {
  display: block;
}

.inset {
  width: 100%;
}

/* ---- vertical divider lines: run behind hero content, in front of images ---- */
.v-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cream);
  transform-origin: top;
  z-index: 1;
  pointer-events: none;
}

.v-line--1 {
  left: var(--line1);
}

.v-line--2 {
  left: var(--line2);
}

/* ---- horizontal divider lines (nav/images and images/text separators) ---- */
.h-line {
  height: 1px;
  background: var(--cream);
  transform-origin: left;
}

.hero > .h-line:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* ---- page-load animation ----
   Lines/images start hidden only when JS is available to animate
   them in; see script.js. No-JS falls back to everything visible. */
.js-anim .v-line,
.js-anim .h-line {
  transform: scale(0);
}

.js-anim .hero-image {
  opacity: 0;
}

/* ---- theming ----
   .theme-light flips the shared --bg/--cream tokens (and their hover
   variants) within its own subtree; anything already built from
   those tokens (backgrounds, text, borders, currentColor icons)
   follows automatically. */
.theme-light {
  --bg: var(--light);
  --cream: var(--dark);
  --bg-hover: var(--light-hover);
  --cream-hover: var(--dark-hover);
}

/* ---- nav ----
   Sticky (not fixed) so it stays in normal flow on first load —
   no manual offset needed for the content below it — then pins to
   the top once scrolled past. Theme is toggled by script.js based
   on which [data-nav-theme] section is behind it. script.js also
   toggles .nav--hidden to slide it out of view on scroll-down and
   back in on scroll-up, each after a short delay. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  color: var(--cream);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s ease;
}

.nav--hidden {
  transform: translateY(-100%);
}

/* The nav's vertical lines are a continuation of the hero's lines, so
   they should only show while the nav sits over the hero (i.e. not
   .theme-light) — and never behind the open mobile menu dropdown. */
.nav .v-line {
  transition: opacity 0.3s ease;
}

.nav.theme-light .v-line,
.nav.menu-open .v-line {
  opacity: 0;
}

.nav .shell {
  padding-top: 15px;
  padding-bottom: 15px;
}

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

.logo {
  display: block;
  width: 29px;
  height: 25.972px;
  transition: color 0.25s ease;
}

.logo:hover {
  color: var(--cream-hover);
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-link {
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.nav-link:hover {
  background-size: 100% 1px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: color 0.25s ease;
}

.nav-toggle:hover {
  color: var(--cream-hover);
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle.is-open .icon-hamburger {
  display: none;
}

.nav-toggle.is-open .icon-close {
  display: block;
}

/* ---- mobile menu dropdown ----
   Sits below the nav bar (top: var(--nav-h)) so it slides down from
   underneath it rather than covering it — the nav bar (and its
   toggle button, which swaps to a close icon) stays visible and
   reachable the whole time. Uses the same swappable --bg/--cream
   tokens as the nav, and script.js keeps its own .theme-light in
   sync with the nav's, so the dropdown matches whichever theme is
   currently showing (dark over the hero, light over the rest). */
.mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  color: var(--cream);
  z-index: 40;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s, background-color 0.3s ease, color 0.3s ease;
}

.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-menu-links a {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.mobile-menu-links a:hover {
  background-size: 100% 1px;
}

.mobile-menu-cta {
  border-top: 1px solid var(--cream);
  padding: 20px 0;
}

.mobile-menu-cta .btn {
  font-size: 16px;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 65px;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.btn-fill {
  background: var(--cream);
  color: var(--bg);
}

.btn-fill:hover {
  background: var(--cream-hover);
}

.btn-outline {
  background: var(--bg);
  color: var(--cream);
  border: 1px solid var(--cream);
}

.btn-outline:hover {
  background: var(--bg-hover);
}

/* ---- hero ---- */
.hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-images {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 30px 0;
  overflow: hidden;
}

.hero-image {
  position: relative;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-image--1 {
  flex: 0 0 24.4604%;
}
.hero-image--1 img {
  object-position: 35% 40%;
}

.hero-image--2 {
  flex: 0 0 24.3405%;
}

.hero-image--3 {
  flex: 1 1 auto;
}

.hero-text {
  flex: 0 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.hero-text h1 {
  margin: 0;
  font-family: 'Lastik', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 55px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hero-buttons {
  flex: 0 0 auto;
  padding-bottom: 40px;
}

.hero-buttons .buttons {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 15px;
}

/* ---- introduction ---- */
.intro {
  background: var(--cream);
  color: var(--bg);
  padding-top: 90px;
  padding-bottom: 90px;
}

.intro p {
  margin: 0;
  font-weight: 350;
  font-size: 26px;
  line-height: 1.5;
}

/* ---- project categories ----
   Base = tablet: a 4-column local grid (1/2/1 span). Web widens it
   to a 10-column grid (3/4/3 span) to match the 12-col page grid's
   gutter math exactly; mobile collapses it to a single column. */
.categories {
  background: var(--card-bg);
  color: var(--bg);
  padding-top: 90px;
  padding-bottom: 90px;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.5;
  transition: opacity 0.25s ease;
}

.view-all::after {
  content: "→";
  display: inline-block;
  margin-left: 0px;
  transition: transform 0.2s, color 0.25s;
}

.view-all:hover {
  opacity: 0.7;
}

.view-all:hover::after {
  transform: translateX(4px);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-image {
  position: relative;
  height: 223px;
  border-radius: 10px;
  overflow: hidden;
}

.category-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  transition: transform 0.3s ease;
}

.category--3 .category-image img {
  object-position: 20% center;
}

.category:hover .category-image img {
  transform: scale(1.08);
}

.category--1,
.category--2,
.category--3,
.category--4 {
  grid-column: span 1;
}

.category-text {
  align-self: flex-start;
  margin: 0;
  font-weight: 350;
  font-size: 18px;
  line-height: 1.6;
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.category:hover .category-text {
  background-size: 100% 1px;
}

/* ---- process ----
   Base = tablet: cards sit in a row at a fixed height with the
   number pinned top and copy pinned bottom (space-between). Mobile
   overrides this back to a natural stacked column — see below. */
.process {
  background: var(--cream);
  color: var(--bg);
  padding-top: 90px;
  padding-bottom: 90px;
}

.process-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 60px;
}

.process-eyebrow {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.process-lead {
  margin: 0;
  font-weight: 350;
  font-size: 18px;
  line-height: 1.6;
}

.process-cards {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.process-card {
  background: var(--card-bg);
  color: var(--bg);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
  justify-content: space-between;
  gap: 24px;
}

.process-card-number {
  border-bottom: 1px solid var(--bg);
  padding: 10px 0;
  font-weight: 350;
  font-size: 26px;
  line-height: 1.5;
}

.process-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-card-body h3 {
  margin: 0;
  font-weight: 350;
  font-size: 26px;
  line-height: 1.5;
}

.process-card-body p {
  margin: 0;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.5;
}

/* ---- project reel ----
   Full-bleed filmstrip of equal-width tiles, edge to edge with no
   gap. Every tile shares the same fixed aspect ratio (563:388) at
   every breakpoint, so tiles stay uniform in size as the row
   reflows; only the tile count changes (mobile drops the first). */
.reel {
  display: flex;
  width: 100%;
}

.reel-image {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 563 / 388;
  overflow: hidden;
}

.reel-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- selected clients ----
   Base = tablet: a fixed-gap 3-column grid that auto-wraps the 6
   logos to 2 rows. Web widens it to a single row of 6 via flexbox
   with space-between, since that row already fits at web widths. */
.clients {
  background: var(--cream);
  color: var(--bg);
  padding-top: 60px;
  padding-bottom: 60px;
}

.clients-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid var(--dark);
}

.clients-eyebrow {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.clients-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 210px;
  row-gap: 60px;
  align-items: center;
}

.client-logo {
  display: flex;
  justify-content: center;
}

.client-logo img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 70px;
  max-width: 150px;
}

/* ---- footer ----
   Side margins come from the shared .shell/.cols/.inset grid (same
   as every other section) instead of a hardcoded padding value —
   that's what keeps it pixel-aligned with the rest of the page at
   every width, not just the 1440px reference. Each row's first
   column is fixed-width, the second fills the rest — web instead
   fixes both columns' widths, leaving the row short of the full
   inset width. */
.footer {
  background: var(--bg);
  color: var(--cream);
  padding-top: 60px;
  padding-bottom: 60px;
}

.footer-container {
  display: flex;
  flex-direction: column;
}

.footer-headline {
  margin: 0 0 30px;
  font-family: 'Lastik', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 55px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.footer-row--contact {
  margin-bottom: 60px;
}

.footer-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-col--primary {
  flex: 0 0 387px;
}

.footer-col--secondary {
  flex: 1 1 0;
  min-width: 0;
}

.footer-col-title {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--card-bg);
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-links a {
  align-self: flex-start;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--card-bg);
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.footer-links a:hover {
  background-size: 100% 1px;
}

.footer-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #716e6a;
}

/* ---- projects page: intro ---- */
.projects-intro {
  background: var(--cream);
  color: var(--bg);
  padding-top: 60px;
  padding-bottom: 60px;
}

.projects-intro-text {
  margin: 0;
  font-family: 'Lastik', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 55px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---- projects page: project grid ---- */
.projects-grid {
  background: var(--cream);
  color: var(--bg);
}

.project-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  margin-bottom: 30px;
  border-top: 1px solid var(--dark);
  border-bottom: 1px solid var(--dark);
}

.project-filter-btn {
  display: grid;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

/* Reserves space for the bold (active) width via an invisible bold
   ghost stacked in the same grid cell, so switching a button to
   is-active never changes its width and shifts its neighbors. */
.project-filter-btn::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: 500;
  visibility: hidden;
  pointer-events: none;
}

.project-filter-btn-label {
  grid-area: 1 / 1;
  justify-self: start;
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.project-filter-btn:hover .project-filter-btn-label {
  background-size: 100% 1px;
}

.project-filter-btn.is-active {
  font-weight: 500;
}

.project-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 60px;
  padding-top: 30px;
  padding-bottom: 90px;
  transition: opacity 0.25s ease;
}

.project-tiles.is-fading {
  opacity: 0;
}

.project-tile.is-hidden {
  display: none;
}

.project-tile-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
}

.project-tile-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-tile:hover .project-tile-image img {
  transform: scale(1.08);
}

.project-tile-title {
  margin-top: 20px;
  padding: 7px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: left top;
  transition: background-size 0.3s ease;
}

.project-tile:hover .project-tile-title {
  background-size: 0% 1px;
}

.project-tile-name,
.project-tile-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.project-tile-name {
  color: var(--dark);
}

.project-tile-desc {
  color: #716e6a;
}

/* ---- project detail page ---- */
.project-intro,
.project-images,
.project-text,
.related-projects {
  background: var(--cream);
  color: var(--bg);
}

.project-head-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--dark);
}

.project-head-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.03);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.project-head-image img.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Optional caption below the head image — omit the markup entirely
   on projects that don't need a photo credit. */
.project-head {
  background: var(--cream);
}

.project-head-credit {
  margin: 0;
  padding: 10px 0;
  color: #716e6a;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.project-intro {
  padding-top: 60px;
  padding-bottom: 90px;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: 60px;
}

.project-meta-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.project-meta-item {
  flex: 1 1 0;
  min-width: 0;
}

.project-meta-services {
  width: 100%;
}

.project-meta-label {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--dark);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.project-meta-value {
  margin: 0;
  padding-top: 10px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.project-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

.project-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--dark);
  border-radius: 40px;
  padding: 3px 11px;
  margin: 0;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

.project-tag:hover {
  opacity: 0.7;
}

.project-intro-title {
  margin: 0 0 60px;
  font-family: 'Lastik', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 55px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.project-lead {
  margin: 0;
  font-weight: 350;
  font-size: 26px;
  line-height: 1.5;
}

.project-images {
  padding-top: 0;
  padding-bottom: 0;
}

.project-images + .project-images {
  padding-top: 20px;
}

.project-images--pair {
  padding-bottom: 90px;
}

/* When a --pair block sits directly before body text (rather than before
   related-projects, its usual spot), its own bottom padding would stack
   with .project-text's top padding for 180px total. Pull the text back up
   so the gap always reads as a single 90px beat. */
.project-images--pair + .project-text {
  margin-top: -90px;
}

.project-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.project-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dark);
}

/* Embedded video (e.g. Vimeo), which brings its own 16:9 responsive
   wrapper — only round the corners and clip, don't fight its aspect ratio. */
.project-video {
  border-radius: 10px;
  overflow: hidden;
}

.project-image img,
.project-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-project:hover .project-image img {
  transform: scale(1.08);
}

.project-text {
  padding-top: 90px;
  padding-bottom: 90px;
}

.project-text-block {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.project-text-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.project-text-label {
  flex: 0 0 184px;
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.project-text-body {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-weight: 350;
  font-size: 18px;
  line-height: 1.6;
}

/* Inline cross-links within body copy (e.g. referencing a sibling
   project) — always underlined, line retracts on hover, matching the
   project-tile-title treatment on the Projects page. */
.text-link {
  color: inherit;
  text-underline-position: from-font;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s ease;
}

.text-link:hover {
  background-size: 0% 1px;
}

.related-projects {
  padding-top: 60px;
  padding-bottom: 60px;
}

.related-projects-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  padding-top: 5px;
  border-top: 1px solid var(--dark);
}

.related-projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.related-projects-header .view-all {
  margin-bottom: 0;
}

.related-projects-title {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.related-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.related-project {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: inherit;
}

.related-project-title {
  margin: 0;
  padding-top: 7px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- about page ---- */
.about-intro {
  background: var(--cream);
  color: var(--bg);
  padding-top: 60px;
  padding-bottom: 60px;
}

.about-bio {
  background: var(--cream);
  color: var(--bg);
  padding-bottom: 60px;
}

.about-bio-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  width: 100%;
}

/* Order is controlled per-block (rather than relying on DOM order) so
   desktop can read text -> images -> details while tablet/mobile keep
   images -> text -> details, without duplicating markup. */
.about-bio-text {
  order: 2;
  width: 100%;
}

.about-images-row {
  order: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.about-photo {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.about-photo-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dark);
}

.about-photo-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.about-photo-image--secondary img {
  object-position: center top;
}

.about-photo-credit {
  margin: 0;
  padding: 10px 0;
  color: #716e6a;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.about-details-row {
  order: 3;
  display: flex;
  gap: 20px;
  width: 100%;
}

.about-detail-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.about-detail-label {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--dark);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.about-detail-values p {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}

/* =========================================================
   Tablet only (768px–1023px): both about-page images sit
   side by side instead of stacked. Desktop (1024px+) has its
   own two-up grid defined further below; mobile keeps the
   base single-column stack.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-images-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .about-photo,
  .about-photo-image--secondary {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* =========================================================
   Tablet through the low end of desktop (768px–1279px): a
   single row of 4 process cards runs too tight at these
   widths, so they wrap into a 2x2 grid. Each card is
   numbered, so the row-then-row reading order stays
   unambiguous. Wide desktop (1280px+) has enough room for a
   single row.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px) {
  .process-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .process-card {
    min-height: 0;
  }
}

/* =========================================================
   Web (1024px and up): 12-column grid, full nav, tighter nav
   padding, smaller logo, and breathing room around the hero
   images — see project notes for why these differ from tablet.
   ========================================================= */
@media (min-width: 1024px) {
  :root {
    --margin: 30px;
    --gutter: 20px;
    --line1: 16.6667%;
    --line2: 42.5694%;
  }

  .cols {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
  }

  /* content inset one column + one gutter from each margin (147px at 1440) */
  .inset {
    grid-column: 2 / 12;
  }

  .hero-image--1 {
    flex-basis: 16.6667%;
  }
  .hero-image--1 img {
    object-position: 32% 40%;
  }

  .hero-image--2 {
    flex-basis: 25.9028%;
  }

  .hero-text h1 {
    font-size: 65px;
  }

  .intro p {
    font-size: 30px;
  }

  .category-image {
    height: 388px;
  }

  .category-text {
    font-size: 20px;
    line-height: 1.6;
  }

  .process-title {
    max-width: 913px;
  }

  .process-lead {
    font-size: 20px;
  }

  .process-card-number {
    font-size: 30px;
  }

  .process-card-body h3 {
    font-size: 30px;
  }

  .process-card-body p {
    font-size: 18px;
    line-height: 1.6;
  }

  .clients-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 50px;
    row-gap: 60px;
  }

  .client-logo {
    flex: 1 1 0;
    min-width: 90px;
    max-width: 150px;
  }

  .footer-headline {
    font-size: 65px;
  }

  .footer-row {
    width: fit-content;
  }

  .footer-col--primary {
    flex: 0 0 330px;
  }

  .footer-col--secondary {
    flex: 0 0 563px;
  }

  .footer-links a {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 350;
  }

  .footer-break {
    display: none;
  }

  .projects-intro-text {
    font-size: 65px;
  }

  .project-filter-btn {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 350;
  }

  .project-head-image {
    aspect-ratio: unset;
    height: calc(100vh - var(--nav-h));
  }

  .project-intro {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* Web collapses the tablet's two-row meta layout (Year/Collaborator/Studio
     row + full-width Services row) back into one row — unwrap the row
     wrapper with display:contents so all four items become direct flex
     children of .project-meta and resize together, with Services kept
     twice as wide via a larger flex-grow share rather than a fixed width. */
  .project-meta {
    flex-direction: row;
    align-items: flex-start;
  }

  .project-meta-row {
    display: contents;
  }

  .project-meta-services {
    flex: 2 1 0;
    min-width: 0;
  }

  .project-intro-title {
    font-size: 65px;
  }

  .project-lead {
    font-size: 30px;
    line-height: 1.5;
  }

  .project-text-block {
    max-width: 914px;
    margin-left: auto;
    margin-right: auto;
  }

  .project-text-label {
    flex-basis: 214px;
  }

  .project-text-body {
    font-size: 20px;
  }

  .about-intro {
    padding-bottom: 90px;
  }

  .about-bio-inner {
    gap: 0;
    align-items: stretch;
  }

  .about-bio-text {
    order: 1;
  }

  .about-images-row {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .about-detail-values p {
    font-size: 20px;
    line-height: 1.6;
  }
}

/* =========================================================
   Low end of desktop only (1024px–1279px): the category
   tiles' fixed 388px image height (set above) makes a single
   row of 4 look cramped and overly tall at these widths, so
   they wrap into a 2x2 grid with a shorter image height.
   Tablet keeps its single row (fine at that width because it
   uses the shorter base image height), and wide desktop
   (1280px+) has enough room for a single row at 388px.
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-image {
    height: 300px;
  }
}

/* =========================================================
   Mobile (up to 767px): hamburger + fullscreen menu instead
   of the inline nav links, smaller logo.
   ========================================================= */
@media (max-width: 767px) {
  .reel-image--1 {
    display: none;
  }

  :root {
    --nav-h: 51px;
    --line1: 25.6219%;
    --line2: 51.2438%;
  }

  .logo {
    width: 23.448px;
    height: 21px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-image--1 {
    flex-basis: 25.6219%;
  }

  .hero-image--2 {
    flex-basis: 25.6219%;
  }

  .hero-text h1 {
    font-size: 32px;
  }

  .hero-buttons {
    padding-bottom: 30px;
  }

  .intro {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .intro p {
    font-size: 20px;
  }

  .categories {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .view-all {
    font-size: 13px;
    line-height: 1.3;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .category-image {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .category-text {
    font-size: 16px;
    line-height: 1.5;
  }

  .process {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .process-title {
    margin-bottom: 30px;
  }

  .process-eyebrow {
    font-size: 13px;
    line-height: 1.3;
  }

  .process-lead {
    font-size: 16px;
    line-height: 1.5;
  }

  .process-cards {
    flex-direction: column;
    gap: 30px;
  }

  .process-card {
    flex: none;
    min-height: 0;
    justify-content: flex-start;
    gap: 60px;
  }

  .process-card-number {
    font-size: 20px;
  }

  .process-card-body h3 {
    font-size: 20px;
  }

  .process-card-body p {
    font-size: 15px;
    line-height: 1.5;
  }

  .clients-eyebrow {
    font-size: 13px;
    line-height: 1.3;
  }

  .clients-logos {
    column-gap: 60px;
    row-gap: 30px;
  }

  .footer-headline {
    font-size: 32px;
  }

  .footer-row {
    flex-direction: column;
    gap: 20px;
  }

  .footer-row--contact {
    gap: 30px;
  }

  .footer-col--primary,
  .footer-col--secondary {
    flex: none;
    width: 100%;
  }

  .footer-col-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .footer-links a {
    font-size: 15px;
    line-height: 1.5;
  }

  .footer-caption {
    font-size: 11px;
  }

  .projects-intro {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .projects-intro-text {
    font-size: 32px;
  }

  .project-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .project-filter-btn {
    font-size: 15px;
    line-height: 1.5;
  }

  .project-tiles {
    grid-template-columns: 1fr;
    column-gap: 10px;
    row-gap: 30px;
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .project-tile-title {
    margin-top: 15px;
  }

  .project-tile-name,
  .project-tile-desc {
    font-size: 13px;
  }

  .project-intro {
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .project-head-credit {
    font-size: 13px;
    line-height: 1.3;
  }

  .project-meta-row {
    flex-direction: column;
  }

  .project-meta-label,
  .project-meta-value {
    font-size: 13px;
    line-height: 1.3;
  }

  .project-tag {
    font-size: 11px;
  }

  .project-intro-title {
    font-size: 32px;
  }

  .project-lead {
    font-size: 20px;
  }

  .project-image-grid {
    grid-template-columns: 1fr;
  }

  .project-images--pair {
    padding-bottom: 60px;
  }

  .project-images--pair + .project-text {
    margin-top: -60px;
  }

  .project-text {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .project-text-row {
    flex-direction: column;
    gap: 5px;
  }

  .project-text-label {
    flex-basis: auto;
    font-size: 13px;
    line-height: 1.3;
  }

  .project-text-body {
    font-size: 16px;
    line-height: 1.5;
  }

  .related-projects-container {
    gap: 15px;
  }

  .clients-container {
    gap: 15px;
  }

  .related-projects-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .related-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 20px;
  }

  .related-project-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .about-details-row {
    flex-direction: column;
    gap: 60px;
  }

  .about-detail-label {
    font-size: 13px;
  }

  .about-detail-values p {
    font-size: 16px;
  }

  .about-photo-credit {
    font-size: 13px;
    line-height: 1.3;
  }

  .about-images-row {
    gap: 15px;
  }
}