@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700&display=swap');

/* ==========================================================================
   RDVS STUDIOS — Minimalist Design Language
   Design Benchmark: Minimalissimo (https://minimalissimo.com/)
   ========================================================================== */

:root {
  /* Minimalissimo Exact Color Tokens — Dark (Default) */
  --background: #000000;
  --foreground: #ffffff;
  --text-secondary: #888888;
  --text-tertiary: #555555;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --surface-subtle: #0d0d0f;
  --header-bg: rgba(0, 0, 0, 0.75);
  --mobile-nav-bg: rgba(0, 0, 0, 0.95);
  --search-bg: rgba(255, 255, 255, 0.04);
  --search-bg-focus: rgba(255, 255, 255, 0.08);
  --hover-bg: rgba(255, 255, 255, 0.06);
  --drawer-bg: #000000;
  --spec-backdrop: rgba(0, 0, 0, 0.5);
  --lightbox-bg: rgba(5, 5, 5, 0.96);
  --input-bg: rgba(255, 255, 255, 0.03);
  --brand-blue: #4288e7;
  --brand-blue-hover: #5da0fa;
  color-scheme: dark;

  /* Minimalissimo Exact Typography */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Stripped to Minimalissimo Standard: 100 thin, 400 normal, 1.4 line-height */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-base: 1.4;
  --line-height-heading: 1.25;

  /* Minimalissimo Spatial Grid */
  --grid-margin: 24px;
  --grid-gutter: 16px;
  --header-height: 56px;
  --max-width: 2000px;

  /* Minimalissimo 150ms standard transition */
  --transition-speed: 150ms;
  --transition-ease: ease;
}

[data-theme="light"] {
  /* Minimalissimo Exact Color Tokens — Light Mode */
  --background: #ffffff;
  --foreground: #111111;
  --text-secondary: #666666;
  --text-tertiary: #8e8e93;
  --border-color: rgba(0, 0, 0, 0.12);
  --border-hairline: rgba(0, 0, 0, 0.08);
  --surface-subtle: #f5f5f7;
  --header-bg: rgba(255, 255, 255, 0.85);
  --mobile-nav-bg: rgba(255, 255, 255, 0.98);
  --search-bg: rgba(0, 0, 0, 0.04);
  --search-bg-focus: rgba(0, 0, 0, 0.08);
  --hover-bg: rgba(0, 0, 0, 0.05);
  --drawer-bg: #ffffff;
  --spec-backdrop: rgba(0, 0, 0, 0.35);
  --lightbox-bg: rgba(255, 255, 255, 0.98);
  --input-bg: rgba(0, 0, 0, 0.03);
  --brand-blue: #1d6fdc;
  --brand-blue-hover: #1558b0;
  color-scheme: light;
}

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

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Strip all heading weights and set line-height to 1.25 - 1.4 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
}

p, span, a, button, input, label, li, textarea, select {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  letter-spacing: normal;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

button {
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-speed) var(--transition-ease);
}

/* ==========================================================================
   Header (Minimalissimo Structure)
   Left: "RDVS"
   Right: Work, About, News, Expertise, RDVSchool, Contact + Search (Icon Trigger)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hairline);
  transition: background-color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}

.header-container {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Studio Brand Link — strictly "RDVS" */
.brand-link {
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  color: var(--brand-blue);
  flex-shrink: 0;
  letter-spacing: -0.01em;
  transition: color var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);
}

.brand-link:hover {
  color: var(--brand-blue-hover);
  opacity: 0.9;
}

/* Right-aligned Navigation & Search Group */
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* Core Navigation Links: Work, About, News, Expertise, RDVSchool, Contact */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--foreground);
}

/* Minimalist Search: input with clickable search icon button outside to the right */
.search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-input {
  background: var(--search-bg);
  border: 1px solid var(--border-hairline);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: var(--line-height-base);
  color: var(--foreground);
  font-family: inherit;
  font-weight: var(--font-weight-normal);
  width: 105px;
  outline: none;
  transition: width 0.2s ease, border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.search-input::placeholder {
  color: var(--text-secondary);
}

.search-input:focus {
  width: 145px;
  border-color: var(--text-secondary);
  background: var(--search-bg-focus);
}

/* Clickable Search Icon button outside the text input */
.search-submit-btn {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  transition: color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.search-submit-btn:hover {
  color: var(--foreground);
  background: var(--hover-bg);
}

.search-submit-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Minimalist Theme Toggle Button */
.theme-toggle-btn {
  background: none;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  transition: color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease);
}

.theme-toggle-btn:hover {
  color: var(--foreground);
  background: var(--hover-bg);
}

.theme-toggle-btn:active {
  transform: scale(0.92);
}

.theme-toggle-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Theme Icon Visibility (Zero layout-shift via CSS) */
:root .theme-icon-light {
  display: none !important;
}
:root .theme-icon-dark {
  display: block !important;
}

[data-theme="light"] .theme-icon-light {
  display: block !important;
}
[data-theme="light"] .theme-icon-dark {
  display: none !important;
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.mobile-toggle:hover {
  color: var(--foreground);
}

/* ==========================================================================
   Hero Viewport & Photographic Canvas (Homepage)
   ========================================================================== */
.hero-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--background);
  overflow: hidden;
  /* Hero is a permanent dark-media zone — pin text tokens so overlays stay legible in light mode */
  --foreground: #ffffff;
  --text-secondary: #888888;
  --text-tertiary: #555555;
}

.hero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-media {
  background-color: #000000;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide-picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-picture img,
.slide-img,
.slide-video,
.slide-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.95);
  transform: none;
}

.slide.active .slide-img,
.slide.active .slide-picture img {
  transform: none;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 20%, transparent 65%, rgba(0, 0, 0, 0.75) 100%);
}

.hero-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 var(--grid-margin) var(--grid-margin) var(--grid-margin);
}

.hero-footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.caption-wrapper {
  max-width: 620px;
}

.caption-card {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.caption-card.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


.caption-card .project-desc {
  display: none !important;
}

/* Very thin service name on homepage slides */
.caption-card .project-service,
.caption-card .project-category,
.caption-card .service-name,
.project-category,
.project-service {
  font-weight: 100 !important;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.project-category {
  font-size: 0.75rem;
  line-height: var(--line-height-base);
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.project-title {
  font-size: clamp(0.675rem, 1.25vw, 0.925rem);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  color: var(--foreground);
  margin-bottom: 6px;
}

.project-desc {
  font-size: 0.9375rem;
  line-height: var(--line-height-base);
  color: var(--text-secondary);
  max-width: 540px;
  margin-bottom: 14px;
}

.project-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-action-link {
  font-size: 0.75rem;
  line-height: var(--line-height-base);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.project-action-link:hover {
  color: var(--text-secondary);
}

.project-spec-trigger {
  font-size: 0.75rem;
  line-height: var(--line-height-base);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-speed) var(--transition-ease);
}

.project-spec-trigger:hover {
  color: var(--foreground);
}

.hero-meta-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* ==========================================================================
   Minimalist Video Volume Controls
   Benchmark: Minimalissimo (Quiet, hairline, refined)
   ========================================================================== */
.minimal-volume-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 20px;
  user-select: none;
  z-index: 25;
  transition: opacity 0.25s ease, visibility 0.25s ease, border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.hero-volume-control {
  position: relative;
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px 10px;
  border-radius: 20px;
  user-select: none;
  z-index: 25;
  transition: border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.hero-volume-control.visible {
  display: inline-flex;
}

.hero-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.minimal-volume-control:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.82);
}

.volume-toggle-btn {
  background: none;
  border: none;
  /* Sits on dark media control surface in both themes — keep white */
  color: #ffffff;
  opacity: 0.85;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: opacity var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease);
}

.volume-toggle-btn:hover {
  opacity: 1;
  transform: scale(1.08);
}

.volume-toggle-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.volume-slider-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 58px;
  height: 14px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
  margin: 0;
  transition: background var(--transition-speed) var(--transition-ease);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.volume-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease;
}

.volume-slider::-moz-range-thumb:hover {
  transform: scale(1.25);
}

.volume-slider::-moz-range-track {
  height: 2px;
  background: transparent;
  border-radius: 1px;
}

/* Standalone video volume overlay for any video on the site */
.video-volume-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
}

.slide-status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.status-active {
  color: var(--foreground);
}

.pagination-bars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-bar {
  width: 12px;
  height: 1px;
  background-color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-speed) var(--transition-ease), width var(--transition-speed) var(--transition-ease);
}

.pagination-bar:hover {
  background-color: var(--text-secondary);
}

.pagination-bar.active {
  width: 22px;
  background-color: rgba(255, 255, 255, 0.4);
}

.pagination-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--foreground);
}

.step-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.step-btn {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.step-btn:hover {
  color: var(--foreground);
}

/* Base Social Navigation Links */
.hero-controls-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.hero-social-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.hero-social-link {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
  white-space: nowrap;
}

.hero-social-link:hover,
.hero-social-link:focus-visible {
  color: var(--foreground);
}

/* ==========================================================================
   Slide-Over Specifications Drawer
   ========================================================================== */
.spec-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 90vw);
  height: 100vh;
  height: 100dvh;
  background: var(--drawer-bg);
  border-left: 1px solid var(--border-color);
  z-index: 100;
  padding: 32px var(--grid-margin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-speed) var(--transition-ease);
}

.spec-drawer.open {
  transform: translateX(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--spec-backdrop);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-hairline);
}

.drawer-tag {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.drawer-close-btn {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.drawer-close-btn:hover {
  color: var(--foreground);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
}

.drawer-project-name {
  font-size: 1.25rem;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  color: var(--foreground);
  margin-bottom: 24px;
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.spec-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.spec-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.spec-value {
  font-size: 0.9375rem;
  color: var(--foreground);
}

.spec-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.spec-discipline-item {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
  padding: 3px 8px;
}

/* ==========================================================================
   Subpage Standard Layout (Minimalissimo Mirror)
   ========================================================================== */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 36px) var(--grid-margin) 80px var(--grid-margin);
}

.page-header {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-header:has(+ .work-toolbar) {
  margin-bottom: 24px;
}

.page-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  color: var(--foreground);
}

.page-subtitle {
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--text-secondary);
  max-width: 680px;
}

/* Minimalist Sticky Filter & Sort Toolbar for Work */
.work-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-left: calc(-1 * var(--grid-margin));
  margin-right: calc(-1 * var(--grid-margin));
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-hairline);
  transition: background-color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}

.filter-nav {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.toolbar-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
    letter-spacing: 0.06em;
  margin-right: 2px;
  flex-shrink: 0;
}

.filter-btn {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-speed) var(--transition-ease);
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--foreground);
}

/* Service groups — the parent button is both the filter and the disclosure toggle */
.filter-group {
  position: relative;
  display: inline-flex;
}

.filter-group-btn.group-active {
  color: var(--foreground);
}

.filter-caret {
  display: inline-block;
  margin-left: 6px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.55;
  vertical-align: 2px;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.filter-group.open .filter-caret {
  transform: rotate(180deg);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  min-width: 232px;
  padding: 18px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease),
              visibility var(--transition-speed) var(--transition-ease);
}

.filter-group.open .filter-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-subbtn {
  text-align: left;
  font-size: 0.82rem;
}

/* Sort Controls */
.sort-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sort-btn {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-speed) var(--transition-ease);
}

.sort-btn:hover,
.sort-btn.active {
  color: var(--foreground);
}

.sort-indicator {
  font-size: 0.6875rem;
  opacity: 0.7;
}

/* Responsive Minimal Grid: 1 col on mobile phones, 2 cols on tablet/phablet, 3 on desktop, 4 on wide */
.minimal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--grid-gutter);
  align-items: start;
  width: 100%;
}

@media (max-width: 560px) {
  .minimal-grid {
    grid-template-columns: 1fr;
    gap: 32px var(--grid-gutter);
  }
}

@media (min-width: 768px) {
  .minimal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px var(--grid-gutter);
  }
}

@media (min-width: 1200px) {
  .minimal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px var(--grid-gutter);
  }
}

/* Varied-size work tiles. The grid script draws each card into one of four tiers on every
   load, and dense flow backfills the holes the larger tiers leave. Width is measured in grid
   columns against a single-column card, so the smallest tile is about a sixth of a feature
   tile's area and the page reads as an editorial layout rather than a stamp sheet. Tiering
   only means something from 768px up — below that a fraction of one column is just a shrunken
   card — so phones and narrow tablets keep the uniform grid.
   #projectGrid holds both layouts the work page renders: year rows and the flat All view. */
@media (min-width: 768px) {
  #projectGrid .minimal-grid {
    grid-auto-flow: row dense;
  }

  /* Centred rather than flush left: the gap the card leaves belongs to the layout, not to
     a missing image. */
  #projectGrid .grid-card.tile-small {
    width: 68%;
    margin-inline: auto;
  }

  #projectGrid .grid-card.tile-wide {
    grid-column: span 2;
  }

  #projectGrid .grid-card.tile-feature {
    grid-column: span 2;
  }
}

/* Four columns is the only width where three columns of artwork still leaves a neighbour
   beside it; at three columns a feature would be a full-bleed banner. */
@media (min-width: 1200px) {
  #projectGrid .grid-card.tile-feature {
    grid-column: span 3;
  }
}

/* Project / Article Card */
.grid-card {
  display: block;
  min-width: 0;
  width: 100%;
  transition: opacity 0.25s ease;
}

.grid-card:hover {
  opacity: 0.85;
}

.card-media-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--surface-subtle);
  margin-bottom: 12px;
}

.card-media-wrapper picture {
  display: block;
  width: 100%;
}

.card-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.grid-card:hover .card-img {
  transform: scale(1.02);
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.card-meta-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.card-year {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  font-feature-settings: "tnum";
}

.card-meta-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.meta-sep {
  color: var(--border-hairline);
}

.card-category {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   Editorial Content Layout (About / Expertise / News Article)
   ========================================================================== */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .editorial-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: 64px;
  }
}

.editorial-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.editorial-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--foreground);
}

.editorial-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.editorial-body p {
  margin-bottom: 16px;
}

.editorial-media {
  width: 100%;
}

.editorial-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Expertise List */
.expertise-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.expertise-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 768px) {
  .expertise-row {
    grid-template-columns: 240px 1fr;
    gap: 32px;
  }
}

.expertise-name {
  font-size: 1.15rem;
  font-weight: var(--font-weight-normal);
  color: var(--foreground);
}

.expertise-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.expertise-link {
  color: var(--foreground);
  transition: color var(--transition-speed) var(--transition-ease);
}

.expertise-link:hover {
  color: var(--text-secondary);
}

.expertise-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 14px;
  transition: color var(--transition-speed) var(--transition-ease);
}

.expertise-view-link:hover {
  color: var(--foreground);
}

/* Design carries its six disciplines as indented sub-rows */
.expertise-subrow {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 1px solid var(--border-hairline);
}

.expertise-subname {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}

.expertise-subrow p {
  font-size: 0.9375rem;
}

.expertise-subservices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.subservice-label {
  font-weight: 500;
  color: var(--foreground);
    letter-spacing: 0.05em;
  font-size: 0.75rem;
  margin-right: 4px;
}

.subservice-item {
  color: var(--text-secondary);
}

a.subservice-item {
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

a.subservice-item:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.subservice-sep {
  color: var(--border-hairline);
  user-select: none;
}

/* Contact Form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.form-input, .form-textarea, .form-select {
  background: var(--input-bg);
  border: 1px solid var(--border-hairline);
  padding: 10px 14px;
  color: var(--foreground);
  font-size: 0.9375rem;
  border-radius: 2px;
  outline: none;
  transition: border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--text-secondary);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit-btn {
  align-self: flex-start;
  padding: 10px 24px;
  border: 1px solid var(--border-color);
  color: var(--foreground);
  font-size: 0.9375rem;
  margin-top: 8px;
  transition: all var(--transition-speed) var(--transition-ease);
}

.form-submit-btn:hover {
  background: var(--foreground);
  color: var(--background);
}

/* ==========================================================================
   Individual Project Page Layout (Minimalissimo Architecture)
   Product pages use the project detail layout, so they share these rules.
   ========================================================================== */
.project-detail-container,
.product-detail-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 32px) var(--grid-margin) 96px var(--grid-margin);
}

.project-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.project-back-link:hover {
  color: var(--foreground);
}

.project-hero-header {
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-meta-line {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* A product page carries .product-page-title, never .project-page-title: the
   verification harness reads the latter as "this is one of the studio's works"
   and demands a work.html card for it. */
.project-page-title,
.product-page-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-heading);
  color: var(--foreground);
  margin-top: 4px;
}

/* Project Hero Media — Fills the entire space designated for the header image */
.project-hero-media {
  width: 100%;
  aspect-ratio: 16/10;
  max-height: 78vh;
  overflow: hidden;
  background-color: var(--surface-subtle);
  margin-bottom: 48px;
  position: relative;
}

.project-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: default;
}

/* For sheets whose content is stacked from the top (brand blocks, title blocks,
   credit lines): the 16/10 cover crop would otherwise shave the first of them. */
.project-hero-media.hero-fit-top .project-hero-img {
  object-position: center top;
}

/* Product heroes are the plates themselves, not crops made for a header: a piece
   that is square or tall would lose its top and bottom to the 16/10 cover, so it
   keeps its own ratio and is letterboxed inside the panel instead. */
.project-hero-media.hero-fit-natural {
  aspect-ratio: auto;
  max-height: none;
}

.project-hero-media.hero-fit-natural .project-hero-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  display: block;
}

/* Project Hero Video Support */
.project-hero-media.has-video,
.project-hero-media:has(.project-hero-video) {
  aspect-ratio: 16/9;
  background-color: #000;
}

.project-hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
  display: block;
}

/* A header panel that declares its own ratio wraps the media it holds: the film or the plate spans the
   whole width of the header space, scaled proportionally, with nothing cut. The ratio is written onto the
   panel from the file's own measured size (scratch/_hero_fit.py owns the rule, scratch/_apply_hero_fit.py
   writes `style="aspect-ratio: W/H"`), and this class exists to lift the 78vh clamp -- a clamp shorter than
   the media's own height would send the crop straight back, which is the whole thing being avoided.
   `.project-hero-media` is otherwise a fixed 16/10 box (16/9 when it holds a film) with `object-fit: cover`,
   which crops every plate wider than 16/10 at the sides and letterboxes any film that is not exactly 16/9.
   This rule sits AFTER the film block above on purpose: `.project-hero-media.has-video` is also two classes,
   so at equal specificity it is source order that decides. Guarded by scratch/_hero_fit_contract.py. */
.project-hero-media.hero-fit-wide {
  max-height: none;
}

/* Gallery Section Headings & Storyboard Dividers */
.gallery-section-divider {
  grid-column: 1 / -1;
  margin-top: 40px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}

/* Gallery sub-headings render in the case they are written in the page markup
   ("Approach + Dressing", "Bar + Lounge") with no forced capitals. */
.gallery-section-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--foreground);
}

.gallery-section-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.gallery-item-full {
  grid-column: 1 / -1;
}

.project-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

@media (min-width: 900px) {
  .project-content-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 72px;
  }
}

.project-story {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-lead-text {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--foreground);
}

.project-body-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.project-body-text p {
  margin-bottom: 16px;
}

.project-body-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-specs-panel {
  border-top: 1px solid var(--border-hairline);
  padding-top: 24px;
}

@media (min-width: 900px) {
  .project-specs-panel {
    border-top: none;
    border-left: 1px solid var(--border-hairline);
    padding-top: 0;
    padding-left: 48px;
  }
}

.project-specs-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-spec-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.project-spec-val {
  font-size: 0.9375rem;
  color: var(--foreground);
}

/* Service tags — one link per service the project is tagged under on work.html */
.project-services {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.project-service {
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 1px;
  transition: border-color var(--transition-speed) var(--transition-ease);
}

.project-service:hover {
  border-bottom-color: var(--foreground);
}

.project-service-sep {
  color: var(--text-secondary);
  opacity: 0.55;
}

/* Gallery Grid — Uncropped & Natural Proportions */
.project-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 64px;
}

@media (min-width: 768px) {
  .project-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

.gallery-item {
  width: 100%;
  background-color: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;   /* anchors .lightbox-film-expand */
}

.gallery-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

.gallery-img:hover {
  opacity: 0.96;
}

.gallery-video,
.gallery-item video {
  width: 100%;
  height: auto;
  display: block;
}

/* js/lightbox.js adds an expand affordance to every gallery film so it can join the fullscreen
   deck without stealing the click-to-play gesture from the player's own controls. */
.lightbox-film-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}

.lightbox-film-expand:hover,
.lightbox-film-expand:focus-visible {
  opacity: 1;
  color: var(--foreground);
  border-color: var(--foreground);
}

.lightbox-film-expand svg {
  width: 15px;
  height: 15px;
}

/* Gallery items that contain a video stack vertically so any caption
   header sits above the player instead of beside it */
.gallery-item:has(video) {
  flex-direction: column;
  align-items: stretch;
}

/* ==========================================================================
   Desktop detail-image sizing — nothing below the project facts runs the full
   page width. Half the container is the ceiling, and every frame keeps its own
   proportions: media is sized by width:auto plus a height ceiling, so a tall
   portrait reaches the height limit first and ends up narrower than a wide
   landscape frame rather than being stretched or cropped to fit a column.
   Phones and tablets keep the existing full-width / two-up behaviour.
   ========================================================================== */
@media (min-width: 1024px) {
  .project-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
  }

  /* A section heading still breaks the run of images across the full measure. */
  .gallery-section-divider {
    flex: 0 0 100%;
    width: 100%;
  }

  .gallery-item,
  .gallery-item-full {
    flex: 0 1 auto;
    width: auto;
    max-width: calc(50% - 16px);
  }

  .gallery-img,
  .gallery-video,
  .gallery-item video {
    width: auto;
    max-width: 100%;
    max-height: 78vh;
    height: auto;
  }

  /* A video item carries its own caption, so its box keeps a measured width
     instead of shrink-wrapping to the player. */
  .gallery-item:has(video) {
    width: calc(50% - 16px);
    align-items: stretch;
  }

  .gallery-item:has(video) video,
  .gallery-item:has(video) .gallery-video {
    width: 100%;
  }
}

/* ==========================================================================
   Minimalist Lightbox (Fullscreen Uncropped Viewer)
   ========================================================================== */
.minimal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--lightbox-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color var(--transition-speed) var(--transition-ease);
  padding: 24px var(--grid-margin);
}

.minimal-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  z-index: 10;
}

.lightbox-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.lightbox-counter {
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.lightbox-title {
  color: var(--text-secondary);
}

.lightbox-close-btn {
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 3px;
  transition: color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}

.lightbox-close-btn:hover {
  color: var(--foreground);
  border-color: var(--foreground);
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 16px;
  overflow: hidden;
  padding: 16px 0;
}

.lightbox-media-container {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox-active-img {
  max-width: 90vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* A gallery film opens in the same stage as a still, so it inherits the same containment.
   The script flips display, so the player is only ever laid out while it is the live slide. */
.lightbox-active-video {
  max-width: 90vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: none;
  background: #000;
  border-radius: 4px;
  cursor: default;
  transition: opacity 0.2s ease;
}

.lightbox-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  flex-shrink: 0;
  transition: color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.lightbox-arrow:hover {
  color: var(--foreground);
  border-color: var(--foreground);
  background: var(--hover-bg);
}

.lightbox-arrow svg {
  width: 20px;
  height: 20px;
}

.lightbox-footer {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  z-index: 10;
}

.lightbox-caption-text {
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
}

@media (max-width: 768px) {
  .minimal-lightbox {
    padding: 16px var(--grid-margin);
  }

  .lightbox-stage {
    position: relative;
    padding: 8px 0;
  }

  .lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 25;
  }

  .lightbox-arrow.prev {
    left: 4px;
  }

  .lightbox-arrow.next {
    right: 4px;
  }

  .lightbox-hint {
    display: none;
  }

  .lightbox-media-container {
    width: 100%;
  }

  .lightbox-active-img {
    max-width: 100%;
    max-height: 72vh;
  }

  .lightbox-active-video {
    max-width: 100%;
    max-height: 72vh;
  }
}

/* Product pages chain to each other, not into the project chain, so they carry
   their own nav class and borrow the rule. */
.project-nav-footer,
.product-nav-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin-top: 32px;
}

.project-nav-link {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.project-nav-link:hover {
  color: var(--foreground);
}

/* Pager thumbnails. Each arrow carries the neighbour's own card thumbnail above its label, so the walk reads
   as "more work in this service" instead of "the next name in the alphabet". The image is decorative (alt="")
   because the label under it already names the project and says which way it goes, and the thumbnail link is
   aria-hidden + tabindex="-1" so the pair is one tab stop and one accessible name, not two. */
.project-nav-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 42%;
  /* min-width:0 is the shrink guard. A flex item's default min-width:auto means "never narrower than the
     content", and the content here is a whole project title, so on a narrow phone the two arrows would rather
     overflow the row than wrap. With it, 42% is a real cap and the label breaks instead. */
  min-width: 0;
}

/* Two thumbs must start at the same height, so the row is top-aligned when it carries them. Scoped through
   :has so the 144 flat archived pagers and the product line keep the vertical centring they have always had. */
.project-nav-footer:has(.project-nav-item) {
  align-items: flex-start;
}

.project-nav-item:last-child {
  align-items: flex-end;
  text-align: right;
}

.project-nav-thumb {
  display: block;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background-color: var(--surface-subtle);
  transition: border-color 0.25s ease;
}

.project-nav-thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.project-nav-thumb:hover {
  border-color: var(--foreground);
}

.project-nav-thumb:hover img,
.project-nav-item:hover .project-nav-thumb img {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .project-nav-item {
    gap: 8px;
  }

  .project-nav-thumb {
    max-width: 168px;
  }
}

/* Minimal Footer */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding: 32px var(--grid-margin);
  margin-top: 64px;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-social-links a {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
  white-space: nowrap;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
  color: var(--foreground);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 992px) {
  .header-right {
    gap: 14px;
  }

  .primary-nav {
    display: none;
  }
  
  .primary-nav.mobile-active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--mobile-nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-hairline);
    padding: 24px var(--grid-margin);
    gap: 18px;
    align-items: flex-start;
    transition: background-color var(--transition-speed) var(--transition-ease);
  }

  .mobile-toggle {
    display: block;
  }

  .search-input {
    width: 75px;
  }
  .search-input:focus {
    width: 105px;
  }

  .work-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 24px;
  }

  .filter-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
    width: 100%;
    padding-bottom: 2px;
    /* Reserve horizontal gestures for the slide-to-scroll behavior; vertical pans and pinch-zoom stay native */
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    -webkit-user-select: none;
    user-select: none;
  }

  .filter-nav::-webkit-scrollbar {
    display: none;
  }

  .filter-nav::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
  }

  /* .filter-nav scrolls horizontally here, which would clip an absolutely
     positioned panel — so the sub-services expand inline in the same row. */
  .filter-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .filter-dropdown {
    position: static;
    display: none;
    flex-direction: row;
    gap: 14px;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    transform: none;
  }

  .filter-group.open .filter-dropdown {
    display: flex;
  }

  .sort-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    padding-bottom: 2px;
    /* Reserve horizontal gestures for the slide-to-scroll behavior; vertical pans and pinch-zoom stay native */
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    -webkit-user-select: none;
    user-select: none;
  }

  .sort-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --grid-margin: 16px;
  }

  .secondary-nav .contact-link {
    display: none;
  }
  
  .hero-footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero-meta-controls {
    align-items: stretch;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
  }

  .hero-controls-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .hero-status-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .step-nav {
    justify-content: flex-end;
  }

  .hero-social-links {
    justify-content: flex-end;
    gap: 16px;
    margin-top: 0;
  }

  .pagination-bars {
    gap: 3px;
  }

  .pagination-bar {
    width: 6px;
  }

  .pagination-bar.active {
    width: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-margin: 16px;
    --grid-gutter: 12px;
  }

  .search-input {
    width: 64px;
  }
  .search-input:focus {
    width: 90px;
  }

  .header-right {
    gap: 10px;
  }

  .card-meta-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .card-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
  }

  .card-year {
    font-size: 0.75rem;
  }

  .card-meta-sub {
    flex-wrap: wrap;
    white-space: normal;
  }

  .hero-social-links {
    gap: 12px;
  }

  .hero-social-link {
    font-size: 0.6875rem;
  }

  .pagination-bars {
    gap: 2px;
  }

  .pagination-bar {
    width: 5px;
  }

  .pagination-bar.active {
    width: 12px;
  }

  .footer-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page-container {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 56px;
  }

  .project-detail-container,
  .product-detail-container {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 64px;
  }

  .project-gallery-grid {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Work Page Row-by-Row Layout System
   ========================================================================== */
.grouped-rows-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 72px;
  width: 100%;
}

@media (max-width: 560px) {
  .grouped-rows-layout {
    gap: 48px;
  }
}

.work-group-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.work-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 12px;
}

.work-group-title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

.work-group-count {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-feature-settings: "tnum";
}

/* ==========================================================================
   INTERACTIVE 360° SPHERICAL MEDIA VIEWER
   ========================================================================== */
.vr-360-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.vr-360-container.is-dragging {
  cursor: grabbing !important;
}

.vr-360-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.vr-360-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

/* 360 Panoramic Badge */
.vr-360-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(12, 12, 12, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
    color: #fff;
  width: fit-content;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.vr-badge-icon {
  animation: vr-spin 16s linear infinite;
}

@keyframes vr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Center Drag Hint */
.vr-drag-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
    color: #ffffff;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
}

.vr-drag-hint.dismissed {
  opacity: 0;
  transform: translate(-50%, -40%);
}

/* Look-Around D-Pad (Compass Widget) */
.vr-look-controls {
  position: absolute;
  bottom: 74px;
  right: 24px;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.vr-btn-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vr-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(25, 25, 25, 0.65);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

.vr-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.vr-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.3);
}

.vr-btn-center {
  background: rgba(40, 40, 40, 0.7);
}

/* Secondary Controls (Zoom + Fullscreen) */
.vr-secondary-controls {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.vr-zoom-group {
  display: flex;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 4px;
}

.vr-btn-fullscreen {
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Slideshow Hero integration adjustments */
.slide .vr-360-container {
  width: 100%;
  height: 100%;
}

.slide .vr-look-controls {
  bottom: 172px;
  right: 32px;
  left: auto;
}

.slide .vr-secondary-controls {
  bottom: 120px;
  right: 32px;
}

@media (max-width: 768px) {
  .slide .vr-look-controls {
    bottom: 190px;
    right: 16px;
    left: auto;
    transform: scale(0.9);
    transform-origin: bottom right;
  }
  .slide .vr-secondary-controls {
    bottom: 140px;
    right: 16px;
    transform: scale(0.9);
    transform-origin: bottom right;
  }
}

/* Minimalist Playback Bar for dedicated 360 video pages */
/* The hero wrapper sizes itself to its content here: .project-hero-media's 16/10
   aspect ratio and 78vh cap would clip the viewer plus the bar below it. */
.vr-hero-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
  background-color: transparent;
}

.vr-playback-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.vr-play-pause-btn,
.vr-mute-btn {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vr-play-pause-btn:hover,
.vr-mute-btn:hover {
  opacity: 0.75;
  transform: scale(1.08);
}

.vr-progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: height 0.15s ease;
}

.vr-progress-track:hover {
  height: 6px;
}

.vr-progress-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.vr-time-display {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Homepage Hero Slide Captions Legibility:
   Because the hero slider renders full-bleed photographic media,
   captions on the homepage slides maintain white contrast over the dark scrim */
.hero-viewport .project-title,
.hero-viewport .project-action-link {
  color: #ffffff !important;
}

.hero-viewport .project-category,
.hero-viewport .project-spec-trigger {
  color: rgba(255, 255, 255, 0.75) !important;
}

.hero-viewport .project-action-link:hover,
.hero-viewport .project-spec-trigger:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   Product — the MIG line
   No rules of its own: the index reuses Work's toolbar and card grid, and each
   product page reuses the project detail layout. The three classes a product
   page adds are grouped with their project twins above, where they inherit.
   ========================================================================== */