:root {
  --color-light: var(--color-neutral-200);
  --color-dark: var(--color-neutral-800);
  --color-primary: #ff4c24;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #efeeec;
  --color-neutral-300: #e3e1de;
  --color-neutral-400: #cbc8c5;
  --color-neutral-500: #818180;
  --color-neutral-600: #2c2c2c;
  --color-neutral-700: #1f1f1f;
  --color-neutral-800: #131313;
  --color-neutral-900: #000000;
  --color-white: var(--color-neutral-100);
  --color-black: var(--color-neutral-900);
  --color-error: var(--color-primary);
  --color-success: #0ba954; 
  --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
  --duration-default: 0.735s;
  --animation-default: var(--duration-default) var(--cubic-default);
  --gap: 2em;
  --section-padding: calc(3.5em + (var(--gap) * 2));
  --container-padding: 2em;
  --header-height: calc(1.5em + (var(--gap) * 2));
  --footer-height: calc(2.785em + (var(--gap) * 2));
}
/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding: 1.5em;
  }
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1em;
    --section-padding: calc(var(--gap) * 2);
  }
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
  /* Mobile portrait specific overrides can be added here */
}
/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 440; /* screen-size in design - no px */
    --size-container-min: 0px;
    --size-container-max: 479px;
  }
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Reset -------------------------------------------------- */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: initial;
}

html,
body {
  -webkit-font-smoothing: antialiased;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

body {
  color: var(--color-dark);
  font-family: 'PP Neue Montreal', Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: var(--size-font);
  line-height: 1;
  font-weight: 500;
  background-color: var(--color-neutral-200);
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7.5em;
  font-weight: 500;
  line-height: 1;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5em;
  font-weight: 500;
  line-height: 1.05;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.1;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.75em;
  font-weight: 500;
  line-height: 1.15;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
}

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

strong {
  font-weight: 600;
}

.body {
  background-color: var(--color-neutral-300);
  color: var(--color-dark);
  font-family: PP Neue Montreal, Arial, sans-serif;
  font-weight: 500;
  line-height: 1;
}

.body.is--dark {
  background-color: var(--color-black);
  color: var(--color-light);
}

.code-embed-css {
  pointer-events: none;
  font-size: var(--size-font);
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.code-embed-osmo, .code-embed-js {
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.osmo-ui {
  z-index: 100;
  pointer-events: none;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: fixed;
  inset: 0;
}

.nav-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.nav-logo-row {
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  width: 13em;
  display: flex;
}

.nav-logo__wordmark {
  width: 4em;
}

.nav-logo__icon {
  width: 1.5em;
  height: 1.5em;
}

.container {
  z-index: 1;
  max-width: var(--size-container);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.container.is--full {
  max-width: 100%;
}

.container.is--medium {
  max-width: calc(var(--size-container) * .85);
}

.container.is--small {
  max-width: calc(var(--size-container) * .7);
}

.nav-row__right {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  pointer-events: auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.header {
  padding-top: var(--gap);
  position: relative;
}

.website-link {
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}

.website-link.is--alt {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  justify-content: flex-start;
  align-items: center;
  height: 1.5em;
  display: flex;
}

.inline-link__p {
  margin-bottom: 0;
}

.website-link__arrow-svg {
  width: 1em;
  margin-top: .2em;
}

.website-link__arrow-svg.is--duplicate {
  position: absolute;
  right: 100%;
}

.website-link__arrow {
  position: relative;
  overflow: hidden;
}

.cloneable {
  padding: var(--section-padding) var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

.footer {
  padding-bottom: var(--gap);
  position: relative;
}

.footer-row {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.cloneable-title {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  pointer-events: auto;
  display: flex;
  position: relative;
}

.cloneable-title__nr {
  opacity: .5;
  white-space: nowrap;
  margin-bottom: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
}

.cloneable-title__h1 {
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
}

.clone-in-webflow {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  background-color: var(--color-light);
  pointer-events: auto;
  border-radius: .25em;
  justify-content: space-between;
  align-items: center;
  width: 21.25em;
  height: 2.875em;
  margin-bottom: -1em;
  margin-right: -1em;
  padding-left: 1em;
  padding-right: .75em;
  text-decoration: none;
  display: flex;
}

.clone-in-webflow__p {
  margin-bottom: 0;
  font-size: 1em;
}

.webflow-logo-svg {
  flex-shrink: 0;
  width: 1.5em;
}

.cloneable-title__gradient {
  background-image: linear-gradient(270deg, var(--color-neutral-200), transparent);
  width: 1em;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.osmo-ui__bg {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color-neutral-400);
  background-color: var(--color-neutral-300);
  height: calc(100% + 1px + (var(--gap) * .5));
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
}

.osmo-ui__bg.is--header {
  border-top-style: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-neutral-400);
  height: calc(100% + 1px + var(--gap));
  top: 0;
  bottom: auto;
}

.osmo-icon-svg {
  width: 8em;
}

.styleguide {
  padding-bottom: calc(var(--footer-height)  + var(--section-padding));
  padding-top: calc(var(--header-height)  + var(--section-padding));
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: block;
}

.styleguide p {
  font-weight: 400;
}

.btn {
  background-color: var(--color-primary);
  color: var(--color-light);
  border-radius: .25em;
  flex: 0 auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: .75em 1.5em;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  text-decoration: none;
}

.btn.is--secondary {
  background-color: var(--color-dark);
}

.btn-wrap {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-wrap: wrap;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.line {
  background-color: #c4c4ca;
  width: 100%;
  height: 1px;
  position: static;
}

.btn__text-p {
  margin-bottom: 0;
}

.styleguide__list {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

@media screen and (max-width: 991px) {
  .container.is--medium, .container.is--small {
    max-width: calc(var(--size-container) * 1);
  }

  .clone-in-webflow {
    margin-right: -.5em;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 4em;
  }

  h2 {
    font-size: 3.25em;
  }
  
  .heading-032c {
    font-size: 4em;
  }
  
  .grid-032c-item-6 {
    grid-column: span 12;
    max-width: 100% !important;
  }

  .osmo-ui {
    position: fixed;
  }

  .nav-logo-row {
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    width: auto;
  }

  .nav-row__right {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
  }

  .cloneable-title {
    pointer-events: none;
    width: calc(100% - 5.25em);
    padding-left: 1em;
    position: absolute;
    overflow: hidden;
  }

  .cloneable-title__nr,
  .cloneable-title__h1 {
    font-size: .875em;
  }

  .clone-in-webflow {
    justify-content: flex-end;
    width: 100%;
    margin-right: 0;
    padding-left: .75em;
  }

  .clone-in-webflow__p {
    display: none;
  }

  .cloneable-title__gradient, .osmo-ui__bg {
    display: block;
  }
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a546_PPNeueMontreal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a54e_PPNeueMontreal-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://cdn.prod.website-files.com/6756bf75aa4ecba10df0a4e9/6756bf75aa4ecba10df0a543_PPNeueMontreal-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------- 032c-Inspired Editorial Layout ------------------------- */
/* Minimal Navigation */
.nav-032c {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  padding: 2em var(--container-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
}

/* Ensure body has padding-top to account for fixed nav */
body {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  body {
    padding-top: 0;
  }
  
  .nav-032c {
    padding: 1.5em var(--container-padding);
    height: auto;
    min-height: auto;
  }
  
  /* Add extra padding to first section to prevent nav overlay */
  section.section-032c:first-of-type {
    padding-top: 10em !important;
    margin-top: 0 !important;
  }
}

/* iPad and Tablet Styles (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-032c {
    padding: 1.75em var(--container-padding);
  }
  
  /* Add padding to first section on tablet */
  section.section-032c:first-of-type {
    padding-top: 9em !important;
    margin-top: 0 !important;
  }
  
  /* Improve grid spacing for iPad */
  .grid-032c {
    gap: 2.5em;
    padding: 0 var(--container-padding);
  }
  
  /* Better text block sizing for iPad */
  .text-block-032c {
    max-width: 60ch;
    font-size: 1.1em;
  }
  
  /* Adjust heading sizes for iPad */
  .heading-032c {
    font-size: 5.5em !important;
  }
  
  h2.font-osmo[style*="font-size: 6em"] {
    font-size: 4.5em !important;
  }
  
  /* Improve work grid for iPad */
  .work-grid-032c {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5em !important;
  }
  
  .project-grid-032c {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5em !important;
  }
  
  /* Cultural Work should stack on iPad for better readability */
  .cultural-work-grid {
    grid-template-columns: 1fr !important;
    gap: 3em !important;
  }
  
  .selected-work-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.5em !important;
  }
  
  /* Better section padding for iPad */
  .section-032c {
    padding: 5em 0;
  }
  
  /* Improve button spacing on iPad */
  .btn-032c {
    padding: 1em 2em;
    font-size: 0.9em;
  }
  
  /* Better image block margins on iPad */
  .image-block-032c {
    margin: 3em 0;
  }
  
  /* Improve project card spacing */
  .work-project-card {
    margin-bottom: 2em;
  }
  
  /* Better navigation link spacing */
  .nav-032c-links {
    gap: 2.5em !important;
  }
}

/* Hide mobile button container on desktop - more specific selector */
@media screen and (min-width: 768px) {
  .nav-032c .nav-032c-mobile-btn,
  .nav-032c > .nav-032c-mobile-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  
  .nav-032c .nav-032c-mobile-btn *,
  .nav-032c > .nav-032c-mobile-btn * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobile Button - Hidden by default on desktop */
.nav-032c-mobile-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -1 !important;
}

.nav-032c a {
  color: var(--color-neutral-100);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875em;
  transition: opacity 0.3s ease;
}

.nav-032c a:hover {
  opacity: 0.6;
}

.nav-032c a.active {
  opacity: 1;
  font-weight: 600;
}

/* Navigation Links */
.nav-032c-links {
  display: flex;
  gap: 4em;
  align-items: center;
}

.nav-032c-links a {
  position: relative;
  padding: 0.5em 0;
  white-space: nowrap;
  letter-spacing: 0.15em;
  font-size: 0.875em;
}

.nav-032c-mobile-menu {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-neutral-900);
  background-color: rgba(20, 20, 20, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  padding: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.nav-032c-mobile-menu.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Mobile menu links styling */
.nav-032c-mobile-menu a {
  display: block !important;
  color: var(--color-neutral-100) !important;
  font-size: 2em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  text-decoration: none !important;
  padding: 0.75em 1em !important;
  margin: 0.25em 0 !important;
  transition: opacity 0.3s ease, transform 0.2s ease, color 0.2s ease !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  white-space: nowrap !important;
}

.nav-032c-mobile-menu a:hover,
.nav-032c-mobile-menu a:focus {
  opacity: 0.8 !important;
  transform: translateX(5px) !important;
  color: var(--color-primary) !important;
  outline: none !important;
}

.nav-032c-mobile-menu a:active {
  transform: translateX(3px) scale(0.98) !important;
}

/* Mobile menu close button */
.nav-032c-mobile-menu #mobile-menu-close {
  position: absolute !important;
  top: 2em !important;
  right: 2em !important;
  color: var(--color-neutral-100) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 2.5em !important;
  padding: 0.5em !important;
  z-index: 201 !important;
  line-height: 1 !important;
  width: 2em !important;
  height: 2em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.3s ease, transform 0.2s ease !important;
}

.nav-032c-mobile-menu #mobile-menu-close:hover {
  opacity: 0.7 !important;
  transform: rotate(90deg) !important;
}

/* Mobile menu content container */
.nav-032c-mobile-menu > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5em !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 90% !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 60vh !important;
}

/* Mobile Navigation */
@media screen and (max-width: 767px) {
  .nav-032c-links {
    display: none !important;
  }
  
  .nav-032c-mobile-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    left: auto !important;
    z-index: 101 !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  .nav-032c-mobile-btn button {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1) !important;
    z-index: 102 !important;
    position: relative !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.5em !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }
  
  .nav-032c-mobile-btn button:active,
  .nav-032c-mobile-btn button:focus {
    opacity: 0.7 !important;
    outline: 2px solid rgba(255, 255, 255, 0.3) !important;
    outline-offset: 2px !important;
  }
  
  .nav-032c-mobile-btn button svg {
    pointer-events: none !important;
  }
  
  .nav-032c {
    padding: 1.5em var(--container-padding);
  }
  
  .nav-032c > div:first-child {
    font-size: 0.875em;
  }
  
  /* Mobile menu improvements */
  .nav-032c-mobile-menu {
    padding: 3em 2em 2em !important;
  }
  
  .nav-032c-mobile-menu a {
    font-size: 1.75em !important;
    padding: 0.5em 0 !important;
  }
  
  .nav-032c-mobile-menu #mobile-menu-close {
    top: 1.5em !important;
    right: 1.5em !important;
    font-size: 2em !important;
  }
  
  .nav-032c-mobile-menu > div {
    gap: 1em !important;
  }
}

@media screen and (max-width: 479px) {
  .nav-032c {
    padding: 1em var(--container-padding);
  }
  
  .nav-032c > div:first-child {
    font-size: 0.75em;
  }
  
  /* Smaller mobile menu */
  .nav-032c-mobile-menu {
    padding: 2.5em 1.5em 1.5em !important;
  }
  
  .nav-032c-mobile-menu a {
    font-size: 1.5em !important;
    padding: 0.4em 0 !important;
    letter-spacing: 0.1em !important;
  }
  
  .nav-032c-mobile-menu #mobile-menu-close {
    top: 1em !important;
    right: 1em !important;
    font-size: 1.75em !important;
    width: 1.5em !important;
    height: 1.5em !important;
  }
  
  .nav-032c-mobile-menu > div {
    gap: 0.75em !important;
  }
}

/* Tablet and Desktop - Hide mobile button, show links */
@media screen and (min-width: 768px) {
  .nav-032c-links {
    display: flex !important;
  }
  
  .nav-032c-mobile-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .nav-032c-mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .nav-032c-mobile-menu.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Tablet Navigation - Updated for iPad */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-032c-links {
    gap: 2.5em !important;
  }
}

/* Desktop Navigation */
@media screen and (min-width: 992px) {
  .nav-032c-links {
    gap: 4em !important;
  }
}

/* Full-Width Grid System */
.grid-032c {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2em;
  width: 100%;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
}

.grid-032c-item {
  grid-column: span 12;
  min-width: 0; /* Prevent grid overflow */
}

@media screen and (min-width: 768px) {
  .grid-032c-item-6 {
    grid-column: span 6;
  }
  .grid-032c-item-4 {
    grid-column: span 4;
  }
  .grid-032c-item-3 {
    grid-column: span 3;
  }
}

@media screen and (max-width: 767px) {
  .grid-032c {
    gap: 1.5em;
    padding: 0 var(--container-padding);
  }
  
  .grid-032c-item-6,
  .grid-032c-item-4,
  .grid-032c-item-3 {
    grid-column: span 12 !important;
  }
}

/* Editorial Sections */
.section-032c {
  width: 100%;
  padding: 8em 0;
  border-top: 1px solid var(--color-neutral-400);
}

/* iPad specific section padding */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-032c {
    padding: 6em 0;
  }
}

.section-032c:first-of-type {
  border-top: none;
}

/* Bold Typography */
.heading-032c {
  font-size: 12em;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

@media screen and (max-width: 991px) {
  .heading-032c {
    font-size: 6em;
  }
}

@media screen and (max-width: 767px) {
  .heading-032c {
    font-size: 4em;
  }
}

/* Project Grid */
.project-grid-032c {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--color-neutral-400);
  margin: 4em 0;
}

/* 032c Magazine-Style Grid */
.work-grid-032c {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  .work-grid-032c {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 991px) {
  .work-grid-032c {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em !important;
  }
  
  .project-grid-032c {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2em !important;
  }
}

@media screen and (max-width: 767px) {
  .work-grid-032c {
    grid-template-columns: 1fr !important;
    gap: 3em !important;
  }
  
  .project-grid-032c {
    grid-template-columns: 1fr !important;
    gap: 3em !important;
  }
  
  /* Fix selected work grid on mobile */
  .selected-work-grid {
    grid-template-columns: 1fr !important;
    gap: 3em !important;
  }
}

@media screen and (max-width: 479px) {
  .work-grid-032c {
    grid-template-columns: 1fr;
    gap: 2em;
  }
  
  .work-project-card__image-link {
    margin-bottom: 1em;
  }
  
  .work-project-card__title {
    font-size: 1.25em !important;
  }
  
  .work-project-card__description {
    font-size: 0.8125em;
  }
}

.work-project-card {
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-100);
  padding: 0;
  height: 100%;
  min-height: auto;
  overflow: visible;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
              box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.work-project-card:hover {
  transform: translateY(-8px) translateZ(0);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.work-project-card__image-link {
  display: block;
  width: 100%;
  margin-bottom: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.work-project-card__content {
  display: flex !important;
  flex-direction: column !important;
  padding: 1.5em !important;
  flex-grow: 1;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  background: transparent !important;
  min-height: auto !important;
  transform: none !important;
}

.work-project-card__image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: var(--color-neutral-200);
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
  transform: translateZ(0);
  /* Fallback for browsers that don't support aspect-ratio */
  height: 0;
  padding-bottom: 133.33%; /* 4/3 = 133.33% for 3/4 aspect ratio (height/width) */
}

.work-project-card:hover .work-project-card__image {
  transform: scale(1.05) translateZ(0);
}

.work-project-card__image-link:hover .work-project-card__image {
  transform: scale(1.05) translateZ(0);
}

/* Modern browsers with aspect-ratio support */
@supports (aspect-ratio: 1) {
  .work-project-card__image {
    height: auto;
    padding-bottom: 0;
  }
}

.work-project-card__title {
  font-size: 1.5em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-dark) !important;
  margin: 0 0 0.5em 0;
  line-height: 1.2;
  opacity: 1 !important;
  visibility: visible !important;
}

.work-project-card__year {
  font-size: 0.875em;
  color: var(--color-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 1em;
  opacity: 1 !important;
  visibility: visible !important;
}

.work-project-card__description {
  font-size: 0.875em;
  color: var(--color-neutral-500) !important;
  line-height: 1.6;
  margin: 0 0 1.5em 0;
  flex-grow: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

.work-project-card__content .work-project-card__link {
  margin-top: auto;
}

.work-project-card__tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;
  opacity: 1 !important;
  visibility: visible !important;
}

.work-project-card__tag {
  font-size: 0.75em;
  color: var(--color-neutral-500) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25em 0.75em;
  border: 1px solid var(--color-neutral-400);
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

.work-project-card__link {
  color: var(--color-neutral-100) !important;
  background: var(--color-primary) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875em;
  font-weight: 500;
  margin-top: auto;
  padding: 1em 1.5em !important;
  border: none !important;
  border-radius: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  text-align: center;
  transition: opacity 0.3s ease;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.work-project-card__link:hover {
  background: var(--color-primary) !important;
  color: var(--color-neutral-100) !important;
  opacity: 0.85 !important;
}

.work-project-card__link:active {
  opacity: 0.75 !important;
}

.project-item-032c {
  background: var(--color-neutral-200);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2em;
  transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
  will-change: transform, background;
  transform: translateZ(0);
}

.project-item-032c:hover {
  background: var(--color-neutral-300);
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.project-item-032c h3 {
  font-size: 1.5em;
  font-weight: 500;
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-item-032c p {
  font-size: 0.875em;
  color: var(--color-neutral-500);
  margin: 0;
  line-height: 1.4;
}

/* Cultural Work Section Specific Styles */
.cultural-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin: 0;
  background: transparent;
}

.cultural-work-item {
  background: var(--color-neutral-200);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-height: auto;
}

.cultural-work-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin: 0;
  display: block;
}

.cultural-work-content {
  padding: 2em;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Medium screens (tablets) - stack to single column */
@media screen and (max-width: 991px) {
  .cultural-work-grid {
    grid-template-columns: 1fr !important;
    gap: 3em !important;
  }
  
  .cultural-work-item {
    max-width: 100%;
  }
  
  .cultural-work-image {
    aspect-ratio: 16/9;
  }
  
  .cultural-work-content {
    padding: 1.5em;
  }
}

/* Small screens (mobile) */
@media screen and (max-width: 767px) {
  .cultural-work-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5em !important;
  }
  
  .cultural-work-image {
    aspect-ratio: 16/9;
  }
  
  .cultural-work-content {
    padding: 1.5em;
  }
  
  .cultural-work-content h3 {
    font-size: 1.125em !important;
  }
  
  .cultural-work-content p {
    font-size: 0.8125em;
  }
}

/* Very small screens */
@media screen and (max-width: 479px) {
  .cultural-work-grid {
    gap: 2em !important;
  }
  
  .cultural-work-content {
    padding: 1.25em;
  }
}

/* Minimal Buttons */
.btn-032c {
  display: inline-block;
  padding: 1em 2em;
  background: var(--color-primary);
  color: var(--color-neutral-100);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875em;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.btn-032c:hover {
  opacity: 0.8;
}

.btn-032c-outline {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.btn-032c-outline:hover {
  background: var(--color-dark);
  color: var(--color-neutral-100);
}

/* Filter Button Active State */
.filter-btn.active {
  background: var(--color-primary);
  color: var(--color-neutral-100);
  border-color: var(--color-primary);
}

.filter-btn.active:hover {
  background: var(--color-primary);
  color: var(--color-neutral-100);
  opacity: 0.9;
}

/* Project Card Hidden State */
.work-project-card.hidden {
  display: none;
}

/* Image Blocks */
.image-block-032c {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  margin: 4em 0;
  /* Fallback for browsers that don't support aspect-ratio */
  height: 0;
  padding-bottom: 56.25%; /* 9/16 = 56.25% for 16/9 aspect ratio */
}

/* Modern browsers with aspect-ratio support */
@supports (aspect-ratio: 1) {
  .image-block-032c {
    height: auto;
    padding-bottom: 0;
  }
}

/* Text Blocks */
.text-block-032c {
  max-width: 65ch;
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--color-neutral-600);
  margin: 2em 0;
}

/* Spacer */
.spacer-032c {
  height: 8em;
}

@media screen and (max-width: 767px) {
  .spacer-032c {
    height: 4em;
  }
  
  /* Mobile adjustments for teaching page */
  .section-032c {
    padding: 4em 0;
  }
  
  /* Stack grid items on mobile */
  .grid-032c-item-3 {
    grid-column: span 12 !important;
  }
  
  .grid-032c-item-6 {
    grid-column: span 12 !important;
  }
  
  /* Reduce gap on mobile */
  .grid-032c {
    gap: 1.5em;
  }
  
  /* Adjust hero section on mobile */
  .section-032c[style*="min-height: 100vh"] {
    min-height: 70vh !important;
    padding-top: 8em !important;
    padding-bottom: 3em !important;
  }
  
  .section-032c[style*="min-height: 80vh"] {
    min-height: 60vh !important;
    padding-top: 8em !important;
    padding-bottom: 3em !important;
  }
  
  /* Fix hero section padding that might cause overlay */
  section.section-032c[style*="padding-top: 8em"] {
    padding-top: 10em !important;
  }
  
  /* Reduce text block max-width on mobile */
  .text-block-032c {
    max-width: 100% !important;
  }
  
  /* Navigation adjustments */
  .nav-032c {
    padding: 1.5em var(--container-padding);
  }
  
  .nav-032c > div:first-child {
    font-size: 0.875em;
  }
  
  /* Reduce heading sizes on mobile */
  .heading-032c {
    font-size: 4em !important;
  }
  
  h2.font-osmo[style*="font-size: 6em"] {
    font-size: 3em !important;
  }
}

@media screen and (max-width: 479px) {
  .section-032c {
    padding: 3em 0;
  }
  
  /* Further reduce gap on very small screens */
  .grid-032c {
    gap: 1em;
  }
  
  /* Adjust hero section on very small screens */
  .section-032c[style*="min-height: 80vh"] {
    min-height: 50vh !important;
    padding-top: 5em !important;
    padding-bottom: 2em !important;
  }
  
  /* Reduce padding in bordered items */
  .grid-032c-item[style*="padding: 3em"] {
    padding: 1.5em !important;
  }
  
  /* Reduce margin bottom on very small screens */
  .grid-032c-item[style*="margin-bottom: 4em"] {
    margin-bottom: 2em !important;
  }
  
  .grid-032c-item[style*="margin-bottom: 2em"] {
    margin-bottom: 1.5em !important;
  }
  
  /* Navigation on very small screens */
  .nav-032c {
    padding: 1em var(--container-padding);
  }
  
  .nav-032c > div:first-child {
    font-size: 0.75em;
  }
  
  /* Further reduce heading sizes */
  .heading-032c {
    font-size: 3em !important;
  }
  
  h2.font-osmo[style*="font-size: 6em"] {
    font-size: 2.5em !important;
  }
}

/* ==================== COMPREHENSIVE MOBILE LAYOUT IMPROVEMENTS ==================== */

/* Mobile Typography Improvements */
@media screen and (max-width: 767px) {
  /* Improve text block readability */
  .text-block-032c {
    font-size: 0.9375em !important;
    line-height: 1.7 !important;
  }
  
  /* Better paragraph spacing on mobile */
  p {
    line-height: 1.7 !important;
  }
  
  /* Improve button text size */
  .btn-032c {
    font-size: 0.8125em !important;
    padding: 1.1em 1.75em !important;
    min-height: 44px; /* Ensure touch target is at least 44px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Improve form input sizes for mobile */
  input[type="text"],
  input[type="email"],
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 1.1em !important;
    min-height: 44px; /* Better touch target */
  }
  
  textarea {
    min-height: 120px;
  }
  
  /* Improve label spacing */
  label {
    margin-bottom: 0.75em !important;
    font-size: 0.8125em !important;
  }
  
  /* Better image block margins on mobile */
  .image-block-032c {
    margin: 2em 0 !important;
  }
  
  /* Improve project card spacing */
  .work-project-card {
    margin-bottom: 2.5em;
  }
  
  /* Better footer spacing on mobile */
  footer.section-032c {
    padding: 4em 0 3em 0 !important;
  }
  
  footer .grid-032c-item {
    margin-bottom: 3em !important;
  }
  
  footer .grid-032c-item:last-of-type {
    margin-bottom: 0 !important;
  }
  
  /* Stack footer columns on mobile */
  footer .grid-032c-item-3 {
    grid-column: span 12 !important;
    margin-bottom: 2.5em !important;
  }
  
  /* Improve footer link spacing */
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Better section title spacing */
  h2.font-osmo[style*="font-size: 6em"] {
    margin-bottom: 1.5em !important;
    line-height: 1.1 !important;
  }
  
  /* Improve teaching section layout */
  .section-032c .grid-032c-item-6:first-child {
    margin-bottom: 3em !important;
  }
  
  /* Better cultural work content padding */
  .cultural-work-content {
    padding: 1.75em !important;
  }
  
  /* Improve work project card image aspect ratio on mobile */
  .work-project-card__image-link {
    margin-bottom: 1.25em !important;
  }
  
  .work-project-card__image {
    aspect-ratio: 4/5 !important;
  }
  
  /* Better tag spacing on mobile */
  .work-project-card__tags {
    margin-bottom: 1em !important;
    gap: 0.4em !important;
  }
  
  .work-project-card__tag {
    font-size: 0.6875em !important;
    padding: 0.35em 0.7em !important;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Improve project card title and description */
  .work-project-card__title {
    font-size: 1.375em !important;
    margin-bottom: 0.6em !important;
    line-height: 1.25 !important;
  }
  
  .work-project-card__description {
    font-size: 0.875em !important;
    line-height: 1.65 !important;
    margin-bottom: 1.5em !important;
  }
  
  .work-project-card__link {
    font-size: 0.8125em !important;
    min-height: 44px;
    padding: 0.75em 1.25em !important;
    width: 100%;
    min-width: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* Improve contact form layout */
  form#contact-form {
    gap: 1.75em !important;
  }
  
  /* Better contact info section */
  .grid-032c-item[style*="margin-bottom: 4em"] {
    margin-bottom: 3em !important;
  }
  
  /* Improve 3D model container on contact page */
  #robot-container {
    height: 50vh !important;
    min-height: 300px;
  }
  
  /* Better contact section padding */
  section.section-032c[style*="min-height: 80vh"] {
    padding-bottom: 2em !important;
  }
  
  /* Improve about page timeline on mobile */
  .timeline-item {
    padding-left: 2em !important;
    margin-bottom: 2.5em !important;
  }
  
  /* Better CTA button groups */
  div[style*="display: flex"][style*="gap: 1em"] {
    flex-direction: column !important;
    gap: 1em !important;
  }
  
  div[style*="display: flex"][style*="gap: 1em"] .btn-032c {
    width: 100%;
    text-align: center;
  }
}

/* Very Small Mobile Devices (479px and below) */
@media screen and (max-width: 479px) {
  /* Further reduce text sizes */
  .text-block-032c {
    font-size: 0.875em !important;
  }
  
  /* Smaller headings */
  h2.font-osmo[style*="font-size: 6em"] {
    font-size: 2.25em !important;
    line-height: 1.15 !important;
  }
  
  /* Better button sizing */
  .btn-032c {
    padding: 1em 1.5em !important;
    font-size: 0.75em !important;
  }
  
  /* Improve form inputs */
  input[type="text"],
  input[type="email"],
  textarea {
    padding: 1em !important;
  }
  
  /* Better section padding */
  .section-032c {
    padding: 2.5em 0 !important;
  }
  
  /* Reduce cultural work content padding */
  .cultural-work-content {
    padding: 1.5em !important;
  }
  
  /* Smaller project card elements */
  .work-project-card__title {
    font-size: 1.25em !important;
  }
  
  .work-project-card__description {
    font-size: 0.8125em !important;
  }
  
  /* Better footer padding */
  footer.section-032c {
    padding: 3em 0 2.5em 0 !important;
  }
  
  /* Improve grid gap */
  .grid-032c {
    gap: 1.25em !important;
  }
  
  /* Better image margins */
  .image-block-032c {
    margin: 1.5em 0 !important;
  }
  
  /* Improve 3D container on very small screens */
  #robot-container {
    height: 40vh !important;
    min-height: 250px;
  }
  
  /* Better contact form spacing */
  form#contact-form {
    gap: 1.5em !important;
  }
  
  /* Improve navigation logo size */
  .nav-logo__wordmark {
    width: 3.5em !important;
  }
  
  /* Better mobile menu button */
  .nav-032c-mobile-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.75em !important;
  }
}

/* Landscape Mobile Orientation */
@media screen and (max-width: 767px) and (orientation: landscape) {
  /* Reduce hero section height in landscape */
  .section-032c[style*="min-height: 100vh"] {
    min-height: 85vh !important;
  }
  
  .section-032c[style*="min-height: 80vh"] {
    min-height: 70vh !important;
  }
  
  /* Better 3D container in landscape */
  #robot-container {
    height: 60vh !important;
  }
  
  /* Reduce section padding in landscape */
  .section-032c {
    padding: 3em 0 !important;
  }
}

/* Touch Target Improvements - Ensure all interactive elements are at least 44px */
@media screen and (max-width: 767px) {
  a, button, input, textarea, select {
    min-height: 44px;
  }
  
  /* Navigation links */
  .nav-032c-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0;
  }
  
  /* Mobile menu links */
  .nav-032c-mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0.75em 1em;
  }
  
  /* Close button */
  .nav-032c-mobile-close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.75em !important;
  }
}

/* Prevent horizontal scroll on mobile */
@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
    width: 100%;
  }
  
  * {
    max-width: 100%;
  }
  
  img, video {
    max-width: 100%;
    height: auto;
  }
  
  /* Ensure grid items don't overflow */
  .grid-032c-item {
    min-width: 0;
    overflow: hidden;
  }
}

/* Improve video responsiveness */
@media screen and (max-width: 767px) {
  video {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
  
  .cultural-work-image {
    width: 100% !important;
    height: auto !important;
  }
}

/* ==================== ADDITIONAL MOBILE OPTIMIZATIONS ==================== */

/* Touch and Interaction Improvements */
@media screen and (max-width: 767px) {
  /* Better tap highlight for iOS */
  a, button {
    -webkit-tap-highlight-color: rgba(255, 76, 36, 0.2);
    tap-highlight-color: rgba(255, 76, 36, 0.2);
  }
  
  /* Improve touch scrolling */
  body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  
  /* Prevent text selection on buttons and links for better touch */
  .btn-032c,
  .nav-032c-mobile-btn,
  .nav-032c-mobile-close,
  button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* Improve scrolling performance */
  .section-032c,
  .grid-032c,
  .work-grid-032c {
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* Optimize images for mobile */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Better PDF modal on mobile */
  .pdf-modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .pdf-modal-body {
    height: calc(100vh - 80px) !important;
  }
  
  /* Improve form inputs for mobile keyboards */
  input[type="email"] {
    inputmode: email;
  }
  
  input[type="tel"] {
    inputmode: tel;
  }
  
  /* Better focus states for mobile */
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  
  /* Prevent zoom on input focus (iOS) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Performance optimizations for mobile */
@media screen and (max-width: 767px) {
  /* Reduce animation complexity on mobile */
  .text-reveal,
  .section-reveal {
    will-change: opacity;
  }
  
  /* Optimize 3D model rendering on mobile */
  #robot-container canvas {
    max-width: 100%;
    height: auto;
  }
  
  /* Better Splide slider on mobile */
  .splide__slide {
    min-width: 0;
  }
  
  /* Improve modal performance */
  .pdf-modal {
    -webkit-overflow-scrolling: touch;
  }
}

/* Very small screens - additional optimizations */
@media screen and (max-width: 479px) {
  /* Further reduce animations on very small devices */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Optimize font loading */
  body {
    font-display: swap;
  }
}

/* Image Fullscreen Modal */
.image-fullscreen-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

.image-fullscreen-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

.image-fullscreen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.image-fullscreen-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  z-index: 10000;
  overflow: hidden;
  touch-action: none;
}

.image-fullscreen-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.25em;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  will-change: transform;
}

.image-fullscreen-close {
  position: absolute;
  top: 1em;
  right: 1em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-neutral-100);
  font-size: 2.5em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
  line-height: 1;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}

.image-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

.image-fullscreen-close:active {
  transform: rotate(90deg) scale(0.95);
}

/* Make case study images look clickable */
img[data-fullscreen="true"] {
  cursor: pointer !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  pointer-events: auto !important;
  z-index: 1;
}

img[data-fullscreen="true"]:hover {
  opacity: 0.9;
  transform: scale(1.01);
}

img[data-fullscreen="true"]:active {
  transform: scale(0.99);
}

/* Ensure all images in case studies are clickable */
section.section-032c img,
.grid-032c-item img,
section img:not([data-fullscreen-initialized]) {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Visual indicator for clickable images on mobile */
@media screen and (max-width: 991px) {
  img[data-fullscreen="true"] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 76, 36, 0.2);
  }
  
  img[data-fullscreen="true"]:active {
    opacity: 0.8;
  }
}

/* Mobile optimizations */
@media screen and (max-width: 767px) {
  .image-fullscreen-container {
    padding: 1em;
  }
  
  .image-fullscreen-close {
    top: 0.5em;
    right: 0.5em;
    font-size: 2em;
    width: 2em;
    height: 2em;
  }
  
  .image-fullscreen-img {
    border-radius: 0;
  }
}

@media screen and (max-width: 479px) {
  .image-fullscreen-container {
    padding: 0.5em;
  }
  
  .image-fullscreen-close {
    top: 0.25em;
    right: 0.25em;
    font-size: 1.75em;
    width: 1.75em;
    height: 1.75em;
  }
}