/*
Theme Name: Meerk Art Visual Group
Theme URI: https://www.instagram.com/meerk__art/
Author: Meerk Art
Description: English-first bilingual creative studio portfolio with a supplied transparent rope mascot and responsive scroll motion.
Version: 33.4.0
Text Domain: meerk-art
*/
/* Design note: Meerk Art Visual Group — orange action signal, ink/cream editorial surfaces, supplied wordmark, and a cursor-aware meerkat companion. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #17110d; --ink-soft: #251914; --cream: #f7f0e6; --orange: #ee671e; --orange-deep: #c84c13; --brand-orange: #ee671e; --muted: #a9998d; --line: rgba(247,240,230,.22); --dark-line: rgba(23,17,13,.2); --ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { background: var(--ink); color: var(--cream); font-family: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif; margin: 0; min-width: 320px; }
html[dir='rtl'] body { font-family: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif; }
button, a { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-shell { background: var(--ink); min-height: 100vh; overflow: hidden; position: relative; }
.grain { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); inset: 0; opacity: .035; pointer-events: none; position: fixed; z-index: 60; }

.site-header { align-items: center; background: rgba(23,17,13,.88); border-bottom: 1px solid rgba(247,240,230,.11); display: flex; height: 82px; justify-content: space-between; padding: 0 clamp(18px, 5vw, 76px); position: fixed; right: 0; top: 0; width: 100%; z-index: 40; }
.brand-lockup { align-items: center; background: transparent; display: inline-flex; height: 54px; justify-content: center; padding: 0; width: 215px; }
.brand-lockup img { height: 100%; object-fit: contain; object-position: center; width: 100%; }
.site-nav { align-items: center; display: flex; gap: clamp(19px, 3.2vw, 48px); left: 50%; position: absolute; transform: translateX(-50%); }
.site-nav button { background: transparent; color: var(--cream); font-size: 13px; opacity: .72; padding: 10px 0; position: relative; transition: color 180ms ease, opacity 180ms ease; }
.site-nav button:not(.nav-cta)::after { background: var(--orange); bottom: 2px; content: ''; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease); width: 100%; }
.site-nav button:hover { color: var(--orange); opacity: 1; }
.site-nav button:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { align-items: center; border: 1px solid var(--line); display: inline-flex; gap: 8px; padding: 10px 14px !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.nav-cta:hover { background: var(--orange); border-color: var(--orange); color: var(--ink) !important; }
.header-tools { align-items: center; display: flex; gap: 18px; }
.header-meta { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; }
.language-switch { background: transparent; border: 1px solid rgba(247,240,230,.28); color: var(--cream); font-family: 'DM Mono', monospace; font-size: 10px; height: 31px; transition: background 180ms ease, border-color 180ms ease; width: 39px; }
.language-switch:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.menu-toggle { background: transparent; color: var(--cream); display: none; }

.footprint-trail { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 6; }
.footprint { color: var(--orange); cursor: default; display: block; height: 42px; opacity: var(--footprint-opacity, .82); pointer-events: auto; position: absolute; transform: rotate(var(--footprint-rotate)) scale(var(--footprint-scale, .8)); transform-origin: center; transition: opacity 500ms var(--ease), transform 300ms var(--ease), filter 300ms ease; width: 34px; }
.footprint:hover { filter: drop-shadow(0 4px 7px rgba(238,103,30,.28)); transform: translateY(-5px) rotate(var(--footprint-rotate)) scale(1.12); }
.footprint__pad, .footprint b { background: currentColor; display: block; position: absolute; }
.footprint__pad { border-radius: 55% 48% 52% 45%; bottom: 0; height: 25px; left: 8px; transform: rotate(14deg); width: 18px; }
.footprint b { border-radius: 50%; height: 8px; width: 7px; }
.footprint b:nth-of-type(1) { left: 3px; top: 9px; }
.footprint b:nth-of-type(2) { left: 13px; top: 3px; }
.footprint b:nth-of-type(3) { left: 23px; top: 8px; }
.meerkat-rope-anchor { height: 470px; left: 7%; opacity: 1; pointer-events: none; position: fixed; top: 0; transform: translateX(-50%); transform-origin: top center; transition: opacity 260ms ease; width: 142px; will-change: transform; z-index: 24; }
.meerkat-rope-anchor--pull-down { animation: rope-tension-down 340ms cubic-bezier(.16, 1, .3, 1) both; }
.meerkat-rope-anchor--pull-up { animation: rope-tension-up 340ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rope-tension-down { 0% { transform: translateX(-50%) scaleX(1) scaleY(1); } 48% { transform: translateX(-50%) scaleX(.986) scaleY(1.024); } 100% { transform: translateX(-50%) scaleX(1) scaleY(1); } }
@keyframes rope-tension-up { 0% { transform: translateX(-50%) scaleX(1) scaleY(1); } 48% { transform: translateX(-50%) scaleX(1.012) scaleY(.986); } 100% { transform: translateX(-50%) scaleX(1) scaleY(1); } }
.meerkat-runner { height: 410px; left: calc(7% + 9px); opacity: 1; pointer-events: none; position: fixed; top: 0; transform: translate3d(calc(-50% + var(--cursor-x, 0px)), calc(var(--runner-top, 160px) - 50% + var(--cursor-y, 0px)), 0) rotate(var(--cursor-rotate, 0deg)); transition: opacity 260ms var(--ease), transform 110ms var(--ease); width: 280px; z-index: 25; }
.site-shell:not(.has-scroll) > .meerkat-runner { opacity: 0; }
.meerkat-runner__canvas { display: block; filter: drop-shadow(0 18px 12px rgba(0,0,0,.36)); height: 458px; margin: -10px 0 0 -5px; position: relative; width: 258px; z-index: 2; }
.meerkat-runner.is-hanging .meerkat-runner__canvas { animation: meerkat-hang .72s ease-in-out infinite alternate; transform-origin: 50% 14%; }
.meerkat-runner.is-climbing-up .meerkat-runner__canvas { animation: meerkat-climb-up .28s ease-in-out infinite alternate; transform-origin: 50% 13%; }
.meerkat-runner.is-climbing-down .meerkat-runner__canvas { animation: meerkat-climb-down .34s ease-in-out infinite alternate; transform-origin: 50% 13%; }
.meerkat-runner.is-waving .meerkat-runner__canvas { animation: meerkat-wave .68s ease-in-out infinite alternate; transform-origin: 50% 15%; }
@keyframes meerkat-hang { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(7px); } }
@keyframes meerkat-climb-up { from { transform: translateY(7px) rotate(-6deg); } to { transform: translateY(-5px) rotate(4deg); } }
@keyframes meerkat-climb-down { from { transform: translateY(-4px) rotate(4deg); } to { transform: translateY(8px) rotate(-5deg); } }
@keyframes meerkat-wave { from { transform: rotate(-5deg) translateY(4px); } to { transform: rotate(6deg) translateY(-3px); } }
.meerkat-runner__rope { background: repeating-linear-gradient(135deg, #ed6c25 0 2px, #8f3216 2px 3px); border: 0; height: 470px; left: calc(50% - 2px); position: absolute; top: 0; width: 4px; z-index: 1; }
.meerkat-runner__rope::before { display: none; }
.meerkat-runner__rope i { display: none; }
.meerkat-runner__rope i:first-child { bottom: 24px; left: -15px; }
.meerkat-runner__rope i:last-child { bottom: 37px; right: -15px; }
.meerkat-runner__track { border-left: 1px dashed rgba(238,103,30,.75); bottom: -42px; height: 260px; left: 50%; position: absolute; transform: translateX(-50%); width: 1px; z-index: -1; }
.meerkat-runner__track::after { background: var(--orange); border-radius: 50%; bottom: 0; content: ''; height: 7px; left: -3px; position: absolute; width: 7px; }
.meerkat-runner__label { background: var(--cream); bottom: -8px; color: var(--ink); display: block; font-family: 'DM Mono', monospace; font-size: 8px; left: 50%; letter-spacing: .06em; padding: 5px 8px; position: absolute; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; }
.meerkat-runner__label b { color: var(--orange-deep); font-weight: 500; }
.meerkat-runner__hand { background: #a9785b; border: 2px solid #241710; border-radius: 70% 35% 60% 40%; height: 31px; position: absolute; top: 68px; width: 13px; z-index: 4; }
.meerkat-runner__hand--left { left: 48px; transform: rotate(-31deg); }
.meerkat-runner__hand--right { right: 48px; transform: rotate(31deg); }
.meerkat-runner.is-climbing-up .meerkat-runner__hand--left { animation: hand-climb-left .42s ease-in-out infinite alternate; }
.meerkat-runner.is-climbing-up .meerkat-runner__hand--right { animation: hand-climb-right .42s ease-in-out .18s infinite alternate; }
.meerkat-runner.is-climbing-down .meerkat-runner__hand--left { animation: hand-descend-left .56s ease-in-out infinite alternate; }
.meerkat-runner.is-climbing-down .meerkat-runner__hand--right { animation: hand-descend-right .56s ease-in-out .2s infinite alternate; }
@keyframes hand-climb-left { from { transform: translateY(8px) rotate(-34deg); } to { transform: translateY(-12px) rotate(-12deg); } }
@keyframes hand-climb-right { from { transform: translateY(-12px) rotate(12deg); } to { transform: translateY(8px) rotate(34deg); } }
@keyframes hand-descend-left { from { transform: translateY(-10px) rotate(-12deg); } to { transform: translateY(7px) rotate(-35deg); } }
@keyframes hand-descend-right { from { transform: translateY(7px) rotate(35deg); } to { transform: translateY(-10px) rotate(12deg); } }
.build-line { display: inline-block; white-space: pre; }
.build-letter { display: inline-block; opacity: calc(.28 + (var(--letter-progress) * .72)); transform: translate3d(calc(var(--piece-offset-x) + var(--mouse-x, 0px) * var(--repel-x-factor, 0)), calc(var(--piece-offset-y) + var(--mouse-y, 0px) * var(--repel-y-factor, 0)), 0) rotate(var(--piece-offset-rotate)) scale(var(--piece-scale)); text-shadow: 0 5px 0 rgba(0,0,0,.16); transition: transform 540ms cubic-bezier(.16, 1.28, .3, 1), opacity 420ms var(--ease), text-shadow 420ms ease; will-change: transform, opacity; }

.hero { align-items: center; display: grid; gap: clamp(34px, 7vw, 120px); grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); min-height: 860px; padding: 150px clamp(20px, 8vw, 145px) 105px; perspective: 1200px; position: relative; transform-style: preserve-3d; }
.hero::before { border: 1px solid rgba(238,103,30,.28); border-radius: 50%; content: ''; height: 480px; position: absolute; right: -150px; top: 125px; transform: perspective(800px) rotateX(var(--hero-orbit-rx, 0deg)) rotateY(var(--hero-orbit-ry, 0deg)) rotate(23deg); transition: transform 700ms var(--ease); width: 480px; }
.hero::after { background: radial-gradient(circle, rgba(238,103,30,.8) 0 1px, transparent 1.5px); background-size: 15px 15px; content: ''; height: 180px; left: 7%; opacity: .35; position: absolute; top: 23%; width: 220px; }
.hero__copy { max-width: 600px; position: relative; transform: translate3d(var(--hero-copy-x, 0px), var(--hero-copy-y, 0px), 0) rotateY(var(--hero-copy-ry, 0deg)) rotateX(var(--hero-copy-rx, 0deg)); transform-style: preserve-3d; transition: transform 650ms var(--ease); z-index: 2; }
.hero__brand-token { align-items: center; color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 10px; letter-spacing: .1em; margin-bottom: 28px; text-transform: uppercase; }
.brand-orbit { align-items: center; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.brand-orbit svg { fill: none; height: 100%; stroke: var(--cream); stroke-linecap: square; stroke-width: 1.4; width: 100%; }
.brand-orbit__accent { stroke: var(--orange); }
.eyebrow, .section-index { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 10px; margin-bottom: 32px; }
.eyebrow span:last-child { margin-left: auto; }
.eyebrow__dot { background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 6px rgba(238,103,30,.13); display: inline-block; height: 8px; width: 8px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Bebas Neue', Impact, 'Space Grotesk', sans-serif; font-weight: 400; letter-spacing: .02em; }
html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3 { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: -.03em; }
h1 { font-size: clamp(68px, 8.6vw, 132px); line-height: .84; max-width: 520px; }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero__intro { color: #d2c5ba; font-size: 18px; line-height: 1.75; margin: 40px 0 26px; max-width: 435px; }
.hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; }
.button { align-items: center; display: inline-flex; font-size: 14px; gap: 13px; justify-content: center; padding: 15px 19px; transition: background 180ms ease, color 180ms ease, gap 200ms var(--ease), transform 180ms ease; }
.button:active { transform: scale(.97); }
.button--orange { background: var(--orange); color: var(--ink); }
.button--orange:hover { background: var(--cream); gap: 19px; }
.button--dark { background: var(--ink); color: var(--cream); }
.button--dark:hover { background: var(--cream); color: var(--ink); gap: 19px; }
.hero__microcopy { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; max-width: 125px; }
.hero__visual-wrap { max-width: 690px; position: relative; transform: translate3d(var(--hero-visual-x, 0px), var(--hero-visual-y, 0px), 0) rotateY(var(--hero-visual-ry, 0deg)) rotateX(var(--hero-visual-rx, 0deg)); transform-style: preserve-3d; transition: transform 700ms var(--ease); z-index: 2; }
.hero__frame-label, .hero__caption { color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; justify-content: space-between; letter-spacing: .08em; }
.hero__frame-label { margin-bottom: 12px; }
.hero__visual { --media-x: 0px; --media-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; background: var(--ink-soft); cursor: pointer; display: block; overflow: hidden; padding: 0; position: relative; text-align: left; transform: perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style: preserve-3d; transition: transform 650ms var(--ease), box-shadow 450ms ease; width: 100%; }
.hero__visual::after { background: linear-gradient(115deg, transparent 32%, rgba(238,103,30,.24) 50%, transparent 68%); content: ''; inset: 0; opacity: 0; position: absolute; transform: translateX(-20%); transition: opacity 250ms ease, transform 500ms var(--ease); }
.hero__visual:hover::after { opacity: 1; transform: translateX(20%); }
.hero__visual img { aspect-ratio: 3 / 2; object-fit: cover; transition: filter 450ms ease, transform 600ms var(--ease); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1); width: 100%; }
.hero__visual:hover, .hero__visual:focus-visible { box-shadow: 0 26px 60px rgba(0,0,0,.3); }
.hero__visual:hover img, .hero__visual:focus-visible img { filter: saturate(1.12); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.045); }
.hero__visual-sticker { align-items: center; background: var(--orange); bottom: 18px; color: var(--ink); display: flex; flex-direction: column; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; height: 102px; justify-content: center; line-height: .82; position: absolute; right: 18px; transform: rotate(-7deg); width: 102px; z-index: 1; }
.hero__visual-sticker span { font-size: 29px; margin-top: 7px; }
.hero__caption { margin-top: 11px; }
.hero__mascot-stage { bottom: 8%; height: min(390px, 44vw); pointer-events: none; position: absolute; right: -8%; transform: translate3d(var(--hero-mascot-x, 0px), var(--hero-mascot-y, 0px), 80px) rotateY(var(--hero-mascot-ry, 0deg)) rotateX(var(--hero-mascot-rx, 0deg)) rotate(-3deg); transform-style: preserve-3d; transition: transform 700ms var(--ease); width: min(250px, 24vw); z-index: 4; }
.hero__mascot-stage::before { display: none; }
.hero__mascot-stage img { animation: mascot-float 4.8s ease-in-out infinite; filter: drop-shadow(0 22px 18px rgba(0,0,0,.35)); height: 100%; object-fit: contain; position: relative; transform: translateZ(80px); width: 100%; z-index: 2; }
.hero__mascot-stage__ring { border: 1px solid rgba(238,103,30,.5); border-radius: 50%; height: 88%; left: 6%; position: absolute; top: 7%; transform: rotate(26deg) translateZ(-30px); width: 88%; }
.hero__mascot-stage__ring::after { background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 7px rgba(238,103,30,.15); content: ''; height: 8px; left: 8%; position: absolute; top: 18%; width: 8px; }
.hero__mascot-stage__label { background: var(--cream); bottom: 3%; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; line-height: 1.35; padding: 7px 9px; position: absolute; right: -10%; transform: rotate(-7deg) translateZ(95px); z-index: 2; }
@keyframes mascot-float { 0%, 100% { transform: translate3d(0, 0, 80px) rotate(0deg); } 50% { transform: translate3d(0, -9px, 80px) rotate(1.5deg); } }
.hero__side-note { align-items: center; bottom: 10%; color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 12px; left: 4%; letter-spacing: .09em; position: absolute; transform: rotate(-90deg); transform-origin: left center; }

.marquee-band { background: var(--orange); color: var(--ink); overflow: hidden; padding: 14px 0 12px; transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0) rotate(-1.2deg) scale(1.02); transition: transform 180ms ease-out; }
.marquee-track { align-items: center; animation: marquee 32s linear infinite; display: flex; font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; gap: 24px; letter-spacing: .02em; white-space: nowrap; width: max-content; }
.marquee-track b { font-size: 14px; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-shell { margin: 0 auto; max-width: 1440px; padding: clamp(100px, 12vw, 175px) clamp(20px, 8vw, 128px); }
.section-heading { display: flex; justify-content: space-between; }
.section-heading--split { align-items: end; margin-bottom: 88px; transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0); transition: transform 180ms ease-out; }
h2 { font-size: clamp(60px, 8vw, 112px); line-height: .88; margin-top: 24px; }
.section-heading__aside { align-items: flex-end; display: flex; flex-direction: column; gap: 34px; max-width: 315px; }
.section-heading__aside p, .section-heading--services > p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.scroll-cue { align-items: center; color: var(--orange); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; gap: 8px; }

.work-grid { display: grid; gap: clamp(20px, 3vw, 44px); grid-template-columns: repeat(12, 1fr); }
.project-card { background: transparent; color: var(--cream); cursor: pointer; display: block; padding: 0; text-align: left; }
html[dir='rtl'] .project-card { text-align: right; }
.project--wide { grid-column: span 7; }
.project--portrait { grid-column: span 4; }
.project--tall { grid-column: 8 / span 5; margin-top: 150px; }
.project--square { grid-column: 2 / span 5; margin-top: 20px; }
.project--offset { margin-top: 145px; }
.project-card__image { --media-x: 0px; --media-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; --media-glow-x: 50%; --media-glow-y: 50%; background: var(--ink-soft); display: block; overflow: hidden; position: relative; transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style: preserve-3d; transition: transform 650ms var(--ease), box-shadow 450ms ease; }
.project--wide .project-card__image { aspect-ratio: 16 / 10; }
.project--portrait .project-card__image { aspect-ratio: 4 / 5; }
.project--tall .project-card__image { aspect-ratio: 4 / 5; }
.project--square .project-card__image { aspect-ratio: 1 / 1; }
.project-card__image::before { border: 1px solid var(--orange); content: ''; inset: 12px; opacity: 0; pointer-events: none; position: absolute; transform: scale(.96); transition: opacity 220ms ease, transform 320ms var(--ease); z-index: 1; }
.project-card:hover .project-card__image::before { opacity: 1; transform: scale(1); }
.project-card__image::after { background: radial-gradient(circle at var(--media-glow-x) var(--media-glow-y), rgba(238,103,30,.34), transparent 34%); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 260ms ease; z-index: 1; }
.project-card img { height: 100%; object-fit: cover; transform: translate3d(var(--media-x), var(--media-y), 0) scale(1); transition: filter 450ms ease, transform 650ms var(--ease); width: 100%; }
.project-card:hover img, .project-card:focus-visible img { filter: saturate(1.15) contrast(1.04); transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.065); }
.project-card:hover .project-card__image, .project-card:focus-visible .project-card__image { box-shadow: 0 22px 50px rgba(0,0,0,.28); }
.project-card:hover .project-card__image::after, .project-card:focus-visible .project-card__image::after { opacity: 1; }
.project-card__hover-details { background: linear-gradient(180deg, transparent, rgba(23,17,13,.94) 34%); bottom: 0; color: var(--cream); display: flex; flex-direction: column; gap: 5px; inset-inline: 0; justify-content: flex-end; min-height: 42%; opacity: 0; padding: 24px 18px 18px; pointer-events: none; position: absolute; transform: translateY(18px); transition: opacity 240ms ease, transform 380ms var(--ease); z-index: 2; }
.project-card__hover-details b { color: var(--orange); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.project-card__hover-details small { color: var(--cream); font-size: 16px; line-height: 1.3; }
.project-card__hover-details > span { color: var(--orange); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }
.project-card:hover .project-card__hover-details, .project-card:focus-visible .project-card__hover-details { opacity: 1; transform: translateY(0); }
.project-card__number, .project-card__play { align-items: center; background: var(--cream); color: var(--ink); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; height: 31px; justify-content: center; position: absolute; top: 12px; transition: transform 260ms var(--ease), background 180ms ease; width: 31px; z-index: 3; }
.project-card__number { left: 12px; }
.project-card__play { background: var(--orange); right: 12px; }
.project-card:hover .project-card__number { background: var(--orange); transform: translateY(-4px) rotate(-5deg); }
.project-card:hover .project-card__play { background: var(--cream); transform: translateY(-4px) rotate(5deg); }
.project-card__meta { color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; justify-content: space-between; letter-spacing: .08em; margin-top: 13px; text-transform: uppercase; }
.project-card__meta b { color: var(--orange); font-weight: 400; }
.project-card__title { align-items: center; display: flex; font-size: clamp(23px, 2.2vw, 34px); font-weight: 600; gap: 9px; letter-spacing: -.04em; margin-top: 7px; }
.project-card__title svg { color: var(--orange); transition: transform 200ms var(--ease); }
.project-card:hover .project-card__title svg { transform: translate(4px, -4px); }

.services-section { background: var(--cream); color: var(--ink); max-width: none; padding-left: max(20px, calc((100vw - 1184px) / 2)); padding-right: max(20px, calc((100vw - 1184px) / 2)); transform: translate3d(calc(var(--mouse-x, 0px) * .18), calc(var(--mouse-y, 0px) * .18), 0); transition: transform 180ms ease-out; }
.section-heading--services { align-items: end; margin-bottom: 80px; }
.section-heading--services .section-index { color: #7a6d63; }
.services-count { color: var(--orange-deep); font-family: 'DM Mono', monospace; font-size: 34px; opacity: calc(.42 + (var(--service-progress, 1) * .58)); transform: translate3d(calc((1 - var(--service-progress, 1)) * 28px), calc((1 - var(--service-progress, 1)) * -22px), 0) rotate(calc((1 - var(--service-progress, 1)) * 8deg)) scale(calc(.88 + (var(--service-progress, 1) * .12))); transition: opacity 420ms ease, transform 600ms cubic-bezier(.16, 1.28, .3, 1); }
.services-count small { color: #7a6d63; display: block; font-size: 9px; margin-top: 5px; }
.services-list { border-top: 1px solid var(--dark-line); }
.service-row { align-items: center; border-bottom: 1px solid var(--dark-line); display: grid; gap: 24px; grid-template-columns: 70px 1.25fr 1fr 30px; min-height: 116px; opacity: calc(.4 + (var(--service-progress, 1) * .6)); transform: translate3d(var(--service-offset-x, 0px), var(--service-offset-y, 0px), 0) rotate(var(--service-offset-rotate, 0deg)) scale(var(--service-scale, 1)); transform-origin: 50% 50%; transition: background 220ms ease, padding 220ms var(--ease), opacity 420ms ease, transform 620ms cubic-bezier(.16, 1.28, .3, 1); will-change: transform, opacity; }
.service-row:hover, .service-row.is-active, .service-row:focus-visible { background: rgba(238,103,30,.13); outline: none; padding: 0 20px; }
.service-row__number { color: #7a6d63; font-family: 'DM Mono', monospace; font-size: 11px; transition: color 180ms ease, transform 240ms var(--ease); }
.service-row h3 { font-size: clamp(25px, 3vw, 43px); font-weight: 600; letter-spacing: -.05em; transition: color 180ms ease, transform 260ms var(--ease); }
.service-row p { color: #7a6d63; font-size: 13px; line-height: 1.7; max-width: 335px; }
.service-row__arrow { color: var(--ink); justify-self: end; transition: color 180ms ease, transform 220ms var(--ease); }
.service-row:hover h3, .service-row.is-active h3, .service-row:focus-visible h3 { color: var(--orange-deep); transform: translateX(8px); }
.service-row:hover .service-row__number, .service-row.is-active .service-row__number, .service-row:focus-visible .service-row__number { color: var(--orange-deep); transform: translateX(4px); }
.service-row:hover .service-row__arrow, .service-row.is-active .service-row__arrow, .service-row:focus-visible .service-row__arrow { color: var(--orange-deep); transform: translate(4px, -4px) rotate(4deg); }
.services-preview { background: var(--ink); box-shadow: 18px 22px 0 rgba(23,17,13,.12), 0 28px 70px rgba(23,17,13,.28); color: var(--cream); opacity: 0; pointer-events: none; position: fixed; left: 0; top: 0; transform: translate3d(var(--service-preview-x, 24px), var(--service-preview-y, 120px), 0) rotate(-3deg) scale(.94); transform-origin: 18% 82%; transition: opacity 180ms ease, transform 320ms var(--ease); width: min(320px, 27vw); z-index: 38; }
.services-preview.is-visible { opacity: 1; transform: translate3d(var(--service-preview-x, 24px), var(--service-preview-y, 120px), 0) rotate(-3deg) scale(1); }
.services-preview__media { aspect-ratio: 4 / 3; background: var(--ink-soft); overflow: hidden; position: relative; }
.services-preview__media::after { background: linear-gradient(135deg, transparent 28%, rgba(238,103,30,.54), transparent 70%); content: ''; inset: 0; mix-blend-mode: screen; opacity: .72; position: absolute; }
.services-preview__media img { height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 600ms var(--ease); width: 100%; }
.services-preview__meta { align-items: center; border-bottom: 1px solid rgba(247,240,230,.18); color: var(--orange); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; justify-content: space-between; letter-spacing: .09em; padding: 12px 14px 10px; }
.services-preview strong { display: block; font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 400; letter-spacing: .02em; line-height: .92; padding: 13px 14px 4px; }
.services-preview small { color: var(--muted); display: block; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; padding: 0 14px 15px; text-transform: uppercase; }

.studio-section { align-items: center; display: grid; gap: clamp(45px, 8vw, 140px); grid-template-columns: .75fr 1.25fr; transform: translate3d(calc(var(--mouse-x, 0px) * .18), calc(var(--mouse-y, 0px) * .18), 0); transition: transform 180ms ease-out; }
.studio-section__intro { max-width: 530px; }
.studio-section__intro h2 { margin-bottom: 32px; }
.studio-section__intro p { color: #d2c5ba; font-size: 17px; line-height: 1.9; margin-bottom: 27px; }
.text-link { align-items: center; border-bottom: 1px solid var(--orange); display: inline-flex; font-family: 'DM Mono', monospace; font-size: 11px; gap: 8px; padding-bottom: 9px; transition: color 180ms ease, gap 180ms var(--ease); }
.text-link:hover { color: var(--orange); gap: 13px; }
.studio-section__interactive { display: grid; gap: 16px; grid-template-columns: .25fr 1fr .42fr; }
.studio-section__orbit { align-items: center; border: 1px solid rgba(247,240,230,.17); display: flex; flex-direction: column; gap: 13px; justify-content: center; min-height: 320px; }
.studio-section__orbit .brand-orbit { height: 115px; width: 115px; }
.studio-section__orbit > span:last-child { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; writing-mode: vertical-rl; }
.map-card, .clock-card { background: var(--ink-soft); border: 1px solid rgba(247,240,230,.16); min-height: 320px; padding: 17px; }
.map-card__top, .map-card__caption, .clock-card__heading { color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; justify-content: space-between; letter-spacing: .05em; }
.map-art { height: 230px; margin: 23px 0 14px; overflow: hidden; position: relative; }
.map-art__grid { background: linear-gradient(rgba(247,240,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(247,240,230,.08) 1px, transparent 1px); background-size: 24px 24px; inset: 0; position: absolute; transform: perspective(240px) rotateX(50deg) scale(1.4); transform-origin: center bottom; }
.map-art::before { border: 1px solid rgba(247,240,230,.17); border-radius: 48% 52% 49% 51%; content: ''; height: 164px; left: 28%; position: absolute; top: 23px; transform: rotate(23deg); width: 130px; }
.map-art::after { border: 1px solid rgba(238,103,30,.5); border-radius: 50%; content: ''; height: 194px; left: 16%; position: absolute; top: 13px; transform: rotate(-18deg); width: 270px; }
.map-point { align-items: center; color: var(--cream); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 6px; position: absolute; z-index: 1; }
.map-point b { background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 6px rgba(238,103,30,.18); display: block; height: 7px; width: 7px; }
.map-point--baghdad { left: 29%; top: 39%; }
.map-point--doha { left: 57%; top: 64%; }
.map-route { border-top: 1px dashed var(--orange); height: 0; left: 32%; position: absolute; top: 53%; transform: rotate(20deg); width: 28%; }
.clock-card { display: flex; flex-direction: column; }
.clock-card__heading { align-items: center; gap: 7px; justify-content: flex-start; }
.clock-card__heading svg { color: var(--orange); }
.clock-row { border-bottom: 1px solid rgba(247,240,230,.12); display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding: 16px 0; }
.clock-row span { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; }
.clock-row strong { color: var(--orange); font-family: 'DM Mono', monospace; font-size: clamp(18px, 2vw, 27px); font-weight: 400; }

.video-section { align-items: center; background: var(--orange); color: var(--ink); display: grid; gap: clamp(34px, 7vw, 100px); grid-template-columns: .72fr 1.28fr; max-width: none; padding-left: max(20px, calc((100vw - 1184px) / 2)); padding-right: max(20px, calc((100vw - 1184px) / 2)); transform: translate3d(calc(var(--mouse-x, 0px) * .2), calc(var(--mouse-y, 0px) * .2), 0); transition: transform 180ms ease-out; }
.video-section__copy { max-width: 450px; }
.video-section__copy .section-index { color: rgba(23,17,13,.68); }
.video-section h2 { font-size: clamp(55px, 7vw, 94px); margin-bottom: 40px; }
.video-section h2 em { color: var(--ink); }
.video-drop { --media-x: 0px; --media-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; --media-glow-x: 50%; --media-glow-y: 50%; background: var(--ink); min-height: 385px; overflow: hidden; position: relative; transform: perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style: preserve-3d; transition: transform 650ms var(--ease), box-shadow 450ms ease; }
.video-drop::before { background: radial-gradient(circle at var(--media-glow-x) var(--media-glow-y), rgba(238,103,30,.32), transparent 30%); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 260ms ease; z-index: 1; }
.video-drop img, .video-drop video { height: 100%; object-fit: cover; opacity: .8; transform: translate3d(var(--media-x), var(--media-y), 0) scale(1); transition: opacity 250ms ease, transform 650ms var(--ease); width: 100%; }
.video-drop:hover::before, .video-drop:focus-within::before { opacity: 1; }
.video-drop:hover img, .video-drop:hover video { opacity: .58; transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.06); }
.video-drop:hover { box-shadow: 0 26px 60px rgba(0,0,0,.28); }
.video-drop__overlay { align-items: center; color: var(--cream); display: flex; flex-direction: column; gap: 13px; inset: 0; justify-content: center; pointer-events: none; position: absolute; }
.video-drop__overlay svg { color: var(--orange); }
.video-drop__overlay small { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.video-drop__details { align-items: flex-start; bottom: 16px; display: flex; flex-direction: column; gap: 4px; left: 18px; opacity: 0; pointer-events: none; position: absolute; transform: translateY(12px); transition: opacity 240ms ease, transform 360ms var(--ease); z-index: 2; }
.video-drop__details b { color: var(--orange); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; }
.video-drop__details small { color: var(--cream); font-size: 15px; }
.video-drop:hover .video-drop__details, .video-drop:focus-within .video-drop__details { opacity: 1; transform: translateY(0); }

.contact-section { background: var(--cream); color: var(--ink); padding: 27px clamp(20px, 8vw, 128px) 30px; transform: translate3d(calc(var(--mouse-x, 0px) * .14), calc(var(--mouse-y, 0px) * .14), 0); transition: transform 180ms ease-out; }
.contact-section__top, .contact-section__footer { align-items: center; display: flex; font-family: 'DM Mono', monospace; font-size: 10px; justify-content: space-between; letter-spacing: .07em; }
.contact-section__top .section-index { color: #7a6d63; }
.contact-section__body { align-items: end; display: flex; justify-content: space-between; padding: 135px 0 145px; }
.contact-section h2 { font-size: clamp(66px, 11vw, 158px); line-height: .82; }
.contact-section h2 em { color: var(--orange); }
.contact-link { align-items: center; background: var(--orange); border-bottom: 1px solid var(--ink); color: var(--ink); display: flex; font-size: 16px; gap: 30px; padding: 15px 16px; transition: background 180ms ease, gap 220ms var(--ease); }
.contact-link:hover { background: var(--ink); color: var(--cream); gap: 48px; }
.contact-section__footer { border-top: 1px solid var(--dark-line); padding-top: 20px; }
.footer-brand { align-items: center; display: flex; gap: 10px; }
.footer-brand .brand-orbit { background: var(--ink); height: 42px; width: 42px; }
.contact-section__footer > img, .footer-brand img { background: var(--ink); height: 42px; object-fit: cover; object-position: center; padding: 3px 8px; width: 169px; }
.footer-socials { align-items: center; display: flex; gap: 10px; }
.footer-socials a { align-items: center; border: 1px solid var(--dark-line); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; height: 28px; justify-content: center; transition: background 180ms ease, color 180ms ease; width: 28px; }
.footer-socials a:hover { background: var(--orange); color: var(--ink); }

.lightbox { align-items: center; background: rgba(23,17,13,.96); display: flex; inset: 0; justify-content: center; padding: 28px; position: fixed; z-index: 55; }
.lightbox__inner { max-height: calc(100vh - 56px); max-width: 1000px; position: relative; width: 100%; }
.lightbox__inner img, .lightbox__inner video { display: block; max-height: 77vh; margin: 0 auto; object-fit: contain; width: 100%; }
.lightbox__close { align-items: center; background: var(--orange); color: var(--ink); display: flex; height: 46px; justify-content: center; position: absolute; right: -12px; top: -12px; width: 46px; z-index: 1; }
.lightbox__caption { color: var(--cream); display: flex; font-family: 'DM Mono', monospace; font-size: 10px; justify-content: space-between; letter-spacing: .08em; padding-top: 15px; text-transform: uppercase; }
.lightbox__caption strong { color: var(--orange); font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -.04em; }

@media (max-width: 900px) {
  .header-meta { display: none; }
  .menu-toggle { display: block; }
  .site-nav { align-items: flex-start; background: var(--ink); border-bottom: 1px solid var(--line); flex-direction: column; gap: 18px; left: 0; padding: 105px 24px 28px; right: 0; top: 0; transform: translateY(-115%); transition: transform 300ms var(--ease); width: 100%; }
  .site-nav--open { transform: translateY(0); }
  .site-nav button { font-size: 20px; }
  .site-nav .nav-cta { font-size: 14px; }
  .meerkat-rope-anchor { height: 420px; left: 15%; width: 104px; }
  .meerkat-runner { height: 308px; left: calc(15% - 1px); width: 205px; }
  .meerkat-runner__canvas { height: 358px; margin: -5px 0 0 -5px; width: 202px; }
  .meerkat-runner__label { font-size: 7px; }
  .hero { display: flex; flex-direction: column; gap: 52px; min-height: auto; padding: 140px 20px 82px; }
  .hero__copy, .hero__visual-wrap { max-width: 700px; width: 100%; }
  .hero__copy { padding-left: 28px; }
  html[dir="rtl"] .hero__copy { padding-left: 0; padding-right: 28px; }
  .hero__mascot-stage { bottom: 6%; height: 245px; right: -2%; width: 150px; }
  .hero__mascot-stage__label { font-size: 7px; right: -5%; }
  .hero__side-note { display: none; }
  .section-shell { padding-bottom: 100px; padding-top: 100px; }
  .section-heading--split, .section-heading--services { align-items: flex-start; flex-direction: column; gap: 30px; margin-bottom: 55px; }
  .section-heading__aside { align-items: flex-start; }
  .work-grid { display: flex; flex-direction: column; }
  .project--tall, .project--square, .project--offset { margin-top: 0; }
  .project-card__title { font-size: 28px; }
  .project-card__hover-details { min-height: 48%; opacity: .96; transform: translateY(0); }
  .video-drop__details { opacity: 1; transform: translateY(0); }
  .service-row { gap: 12px; grid-template-columns: 40px 1fr 20px; min-height: 135px; padding: 17px 0; }
  .service-row p { grid-column: 2 / 3; grid-row: 2; }
  .service-row__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .services-count { align-self: flex-end; }
  .services-preview { display: none; }
  .studio-section { display: flex; flex-direction: column; align-items: stretch; }
  .studio-section__interactive { grid-template-columns: 1fr; }
  .studio-section__orbit { min-height: 130px; }
  .studio-section__orbit .brand-orbit { height: 72px; width: 72px; }
  .studio-section__orbit > span:last-child { writing-mode: initial; }
  .map-card { min-height: 300px; }
  .video-section { display: flex; flex-direction: column; align-items: stretch; }
  .video-drop { min-height: 290px; }
  .contact-section__body { align-items: flex-start; flex-direction: column; gap: 60px; padding: 105px 0 110px; }
  .contact-section__footer { align-items: flex-start; flex-wrap: wrap; gap: 18px; }
  .contact-section__footer > span { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .brand-lockup { height: 43px; width: 165px; }
  .meerkat-rope-anchor { left: 15%; }
  .meerkat-runner { left: calc(15% - 1px); }
  .header-tools { gap: 10px; }
  .hero h1 { font-size: clamp(62px, 17vw, 95px); }
  .hero__intro { font-size: 16px; }
  .hero__mascot-stage { bottom: 9%; height: 205px; right: -8%; width: 124px; }
  .hero__mascot-stage::before { height: 108%; left: 51%; top: -4%; }
  .hero__mascot-stage__ring { height: 82%; left: 9%; top: 8%; width: 82%; }
  .hero__mascot-stage__label { bottom: 0; font-size: 6px; padding: 5px 6px; right: -7%; }
  h2 { font-size: clamp(54px, 15vw, 85px); }
  .hero__visual-sticker { bottom: 12px; font-size: 19px; height: 78px; right: 12px; width: 78px; }
  .hero__visual-sticker span { font-size: 22px; }
  .contact-section h2 { font-size: clamp(58px, 16vw, 95px); }
}
@media (prefers-reduced-motion: reduce) {
  .footprint { opacity: .22; transform: rotate(var(--footprint-rotate)) scale(.86); transition: none; }
  .footprint:hover { filter: none; transform: rotate(var(--footprint-rotate)) scale(.86); }
 html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .meerkat-rope-anchor { animation: none !important; } .meerkat-runner { left: auto; right: 7%; top: 0; --runner-top: 120px; } .services-preview { display: none; } }


/* Creative discipline interactions */
.creative-beats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; max-width: 940px; position: relative; z-index: 8; }
.creative-beat { --media-x: 0px; --media-y: 0px; align-items: flex-start; background: rgba(247,240,230,.045); border: 1px solid rgba(247,240,230,.16); color: var(--cream); display: grid; gap: 8px; min-height: 132px; padding: 18px; position: relative; text-align: left; transform: translate3d(var(--media-x), var(--media-y), 0); transition: background 280ms var(--ease), border-color 280ms ease, color 280ms ease, transform 420ms var(--ease), box-shadow 280ms ease; }
.creative-beat > span { color: var(--orange); font-family: 'DM Mono', monospace; font-size: 10px; }
.creative-beat strong { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 27px; font-weight: 400; letter-spacing: .03em; }
.creative-beat small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.creative-beat > svg { position: absolute; right: 16px; top: 17px; transition: transform 280ms var(--ease); }
.creative-beat:hover, .creative-beat:focus-visible { background: var(--orange); border-color: var(--orange); box-shadow: 0 18px 40px rgba(0,0,0,.2); color: var(--ink); outline: none; transform: translate3d(var(--media-x), calc(var(--media-y) - 6px), 0) rotate(-1deg); }
.creative-beat:hover small, .creative-beat:focus-visible small { color: rgba(23,17,13,.72); }
.creative-beat:hover > svg, .creative-beat:focus-visible > svg { transform: translate(4px,-4px); }
.creative-beat--social { background: rgba(238,103,30,.12); }
@media (max-width: 900px) { .creative-beats { grid-template-columns: 1fr; margin-top: 24px; } .creative-beat { min-height: 104px; } }
@media (prefers-reduced-motion: reduce) { .creative-beat, .creative-beat:hover, .creative-beat:focus-visible { transform: none; transition: none; } }


/* Artistic gallery composition and cursor light */
.work-grid { align-items: start; gap: clamp(18px, 2.8vw, 42px); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.work-grid .project-card:nth-child(1) { grid-column: 1 / span 7; }
.work-grid .project-card:nth-child(2) { grid-column: 9 / span 4; margin-top: 86px; }
.work-grid .project-card:nth-child(3) { grid-column: 2 / span 4; margin-top: 18px; }
.work-grid .project-card:nth-child(4) { grid-column: 7 / span 5; margin-top: 118px; }
.work-grid .project-card:nth-child(5) { grid-column: 1 / span 7; margin-top: 54px; }
.work-grid .project-card:nth-child(6) { grid-column: 9 / span 4; margin-top: -22px; }
.project-card__image { isolation: isolate; }
.project-card__image::after { background: radial-gradient(circle at var(--media-glow-x) var(--media-glow-y), rgba(255,210,145,.58) 0, rgba(238,103,30,.24) 18%, transparent 47%), linear-gradient(112deg, transparent 35%, rgba(255,255,255,.2) 48%, transparent 61%); background-size: 100% 100%, 220% 100%; background-position: 0 0, calc(var(--media-glow-x) * 1.35 - 42%) 0; mix-blend-mode: screen; opacity: 0; transition: opacity 300ms ease, background-position 480ms var(--ease); z-index: 2; }
.project-card__image::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(238,103,30,.28); z-index: 3; }
.project-card:hover .project-card__image::after, .project-card:focus-visible .project-card__image::after { opacity: 1; }
.project-card:hover .project-card__image { box-shadow: 0 28px 70px rgba(0,0,0,.34), 0 0 34px rgba(238,103,30,.18); }
@media (max-width: 900px) {
  .work-grid { display: grid; gap: 34px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid .project-card:nth-child(1), .work-grid .project-card:nth-child(5) { grid-column: 1 / -1; margin-top: 0; }
  .work-grid .project-card:nth-child(2), .work-grid .project-card:nth-child(6) { grid-column: 2; margin-top: 34px; }
  .work-grid .project-card:nth-child(3), .work-grid .project-card:nth-child(4) { grid-column: 1; margin-top: 0; }
}
@media (max-width: 520px) {
  .work-grid { display: flex; flex-direction: column; gap: 34px; }
  .work-grid .project-card:nth-child(n) { margin-top: 0; width: 100%; }
  .project-card__image::after { background: radial-gradient(circle at var(--media-glow-x) var(--media-glow-y), rgba(255,210,145,.48), transparent 46%); }
}
@media (prefers-reduced-motion: reduce) {
  .project-card__image::after { transition: none; }
}


/* Keep the project lightbox closed until a project is deliberately opened. */
.lightbox[hidden] { display: none !important; }


/* Opening mascot loading scene and persistent scroll runner */
.loading-intro { align-items: center; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; inset: 0; justify-content: center; opacity: 0; pointer-events: none; position: fixed; transform: scale(1.015); transition: opacity 520ms var(--ease), transform 700ms var(--ease); z-index: 80; }
.loading-intro.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
.loading-intro__stage { background: linear-gradient(145deg, #2d211c, #120d0a); border: 1px solid rgba(247,240,230,.18); box-shadow: 0 28px 80px rgba(0,0,0,.42); height: clamp(150px, 23vw, 260px); overflow: hidden; position: relative; transform: rotate(-3deg); width: clamp(250px, 42vw, 500px); }
.loading-intro__stage::after { background: linear-gradient(90deg, transparent 0 18%, rgba(238,103,30,.75) 18% 20%, transparent 20% 76%, rgba(247,240,230,.22) 76% 77%, transparent 77%); bottom: 22%; content: ''; height: 2px; left: 7%; position: absolute; right: 7%; }
.loading-intro__stage img { height: 100%; object-fit: cover; object-position: center; opacity: .82; width: 100%; }
.loading-intro__beam { background: radial-gradient(circle, rgba(238,103,30,.56), transparent 68%); height: 170%; left: 16%; opacity: .8; position: absolute; top: -34%; transform: rotate(25deg); width: 25%; }
.loading-intro__word { color: var(--orange); font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(42px, 7vw, 82px); letter-spacing: .12em; margin-top: 30px; }
.loading-intro__word span { animation: loading-dots 1.1s steps(4, end) infinite; display: inline-block; width: 1.2em; }
.loading-intro small { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .16em; margin-top: 8px; }
@keyframes loading-dots { 0%, 20% { opacity: .2; } 45% { opacity: 1; } 80%, 100% { opacity: .35; } }
.site-shell.has-scroll > .meerkat-runner { opacity: 1; }
@media (max-width: 520px) { .loading-intro__stage { height: 148px; width: 286px; } .loading-intro__word { font-size: 48px; margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .loading-intro, .meerkat-runner { transition: none; } .loading-intro__word span { animation: none; opacity: 1; } }