/* Extra page styles */

 /* Right-side hero media for AI + Design */
 .ai-hero-media .ai-media-stack { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 420px; }
 .ai-hero-media .ai-media-stack img { max-width: 320px; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-md); }
 .hero .hero-content h2 { padding-bottom: 16px; }

 /* Offset for fixed header on desktop so H2 isn't hidden */
 @media (min-width: 1025px) { main { margin-top: 80px; } }

 /* Other Work grid — mirrors layout and responsiveness from reference */
 .other-work { padding: var(--space-48) 0 var(--space-64); background: var(--color-white); }
 .other-work .container { max-width: 1920px; margin: 40px 80px; }
 /* Ensure 40px gap between section header and gallery */
 .other-work h2 { margin-bottom: var(--space-40); }
 .other-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
 .other-item { position: relative; overflow: hidden; border-radius: 12px; background: var(--color-white); }
 /* Show full image within variable-height containers */
 .other-item img { width: 100%; height: auto; display: block; object-fit: contain; }
 /* Center-specific tweak for items that need inner centering */
 .other-item--center { display: grid; place-items: center; }
 .other-item--center img { width: auto; max-width: 100%; height: auto; }
 /* Tablet */
 @media (max-width: 1024px) { .other-work .container { margin: 0 var(--space-40); } .other-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-16); } }
 /* Mobile */
 @media (max-width: 640px) { .other-grid { grid-template-columns: 1fr; gap: var(--space-12); } }

 /* Subtle reveal animation on scroll */
 .reveal-on-scroll { opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 420ms ease, transform 520ms ease; }
 .reveal-on-scroll.is-visible { opacity: 1; transform: none; }
 /* Stagger effect */
 .other-grid .reveal-on-scroll:nth-child(1) { transition-delay: 40ms; }
 .other-grid .reveal-on-scroll:nth-child(2) { transition-delay: 80ms; }
 .other-grid .reveal-on-scroll:nth-child(3) { transition-delay: 120ms; }
 .other-grid .reveal-on-scroll:nth-child(4) { transition-delay: 160ms; }
 .other-grid .reveal-on-scroll:nth-child(5) { transition-delay: 200ms; }
 .other-grid .reveal-on-scroll:nth-child(6) { transition-delay: 240ms; }
 .other-grid .reveal-on-scroll:nth-child(7) { transition-delay: 280ms; }
 .other-grid .reveal-on-scroll:nth-child(8) { transition-delay: 320ms; }