@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Oswald:wght@400;500;600&display=swap');

:root {
  --paper: #f8f8f6;
  --ink: #1d1d1d;
  --muted: #6e6e6c;
  --line: rgba(29, 29, 29, .14);
  --accent: #5c5fe6;
  --accent-dark: #4548c7;
  --panel: rgba(255, 255, 255, .72);
  --heading: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --body: 'DM Sans', Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.35; overflow-x: hidden; }
body.is-dark { --paper: #181818; --ink: #f3f3f0; --muted: #a7a7a2; --line: rgba(255,255,255,.16); --panel: rgba(35,35,35,.8); color-scheme: dark; }
body.is-dark .noise { opacity: .11; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.site-shell { position: relative; isolation: isolate; min-width: 320px; }
.noise { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .06; 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.section { position: relative; }
.sticky-stage { position: relative; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Navigation */
.site-nav { position: fixed; z-index: 20; top: 20px; left: 50%; width: min(508px, calc(100vw - 40px)); height: 56px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 84%, transparent); box-shadow: 0 12px 36px rgba(0,0,0,.07); backdrop-filter: blur(18px); transition: width .45s ease, background .3s ease, transform .45s ease; }
.brand-avatar { flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border: 1px solid var(--line); background: #e7e7e4; }
.brand-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nav-links { display: flex; align-items: center; flex: 1; justify-content: space-evenly; gap: 5px; }
.nav-links a { padding: 9px 5px; color: var(--muted); font-size: 14px; transition: color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links .nav-contact { min-width: 118px; padding: 11px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); text-align: center; }
.availability, .menu-toggle, .mobile-menu { display: none; }

/* Hero */
.hero { height: 720px; min-height: 720px; overflow: hidden; background: #182132 url("assets/video-web/hero.webp") center / cover no-repeat; }
.hero-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; opacity: 1; filter: none; }
.hero-video.is-failed { opacity: 0; }
.hero::before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 28%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.48) 100%); }
.hero::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 47%, transparent 0 22%, rgba(0,0,0,.04) 60%, rgba(0,0,0,.18) 79%); }
.hero-copy { position: absolute; z-index: 2; }
.hero-copy, .hero-copy h1, .hero-copy p { color: #fff; }
.hero-copy-left { left: 11.6%; top: 34.5%; }
.hero-copy-right { right: 8.2%; top: 39.5%; text-align: right; }
.eyebrow, .section-label, .section-kicker { margin: 0 0 16px; font-family: var(--heading); font-size: 18px; letter-spacing: .02em; line-height: 1; }
.section-label { font-weight: 600; text-align: left; }
.hero h1 { margin: 0; font-family: var(--heading); font-size: clamp(76px, 8.4vw, 130px); font-weight: 500; letter-spacing: -.055em; line-height: .84; }
.hero-copy-right p { max-width: 320px; margin: 16px 0 0 auto; color: var(--muted); font-size: 16px; line-height: 1.35; }
.hero-portrait { position: absolute; z-index: 4; top: 400px; left: 50%; width: 340px; height: 472px; transform: translateX(-50%) translate(var(--settle-x, 0px), var(--settle-y, 0px)); transform-style: preserve-3d; perspective: 1200px; cursor: pointer; opacity: 1; transition: opacity .45s ease, transform .9s cubic-bezier(.2,.75,.2,1), top .9s cubic-bezier(.2,.75,.2,1), left .9s cubic-bezier(.2,.75,.2,1); }
.hero-portrait.is-floating { position: fixed; top: 50%; transform: translate(-50%, -50%); }
.hero-portrait.is-stopped { --stop-tilt-x: -4deg; --stop-tilt-y: 2deg; position: absolute; top: var(--stop-top, 400px); left: var(--stop-left, 50%); transform: translate(calc(-50% + var(--settle-x, 0px)), var(--settle-y, 0px)); }
.hero-portrait.is-measuring { transition: none !important; }
.hero-portrait.is-video-overlap { opacity: 1; }
.hero-portrait.is-floating { opacity: .62; }
.hero-portrait.is-stopped { opacity: 1; }
.portrait-inner { position: absolute; inset: 0; transform: rotateY(var(--scroll-rotate, 0deg)) rotateX(var(--tilt-y, var(--stop-tilt-y, 0deg))) rotateY(var(--tilt-x, var(--stop-tilt-x, 0deg))); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.75,.2,1); }
.portrait-face { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 0 26px 50px rgba(0,0,0,.12); transition: transform .9s cubic-bezier(.2,.75,.2,1); }
.portrait-face picture { display: block; width: 100%; height: 100%; }
.portrait-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.portrait-front { transform: rotateY(0deg); }
.portrait-front { backface-visibility: hidden; }
.portrait-back { transform: rotateY(180deg); backface-visibility: visible; }
.hero-portrait.is-flipped .portrait-front { transform: rotateY(-180deg); }
.hero-portrait.is-flipped .portrait-back { transform: rotateY(0deg); }
.hello-bubble { position: absolute; z-index: 12; left: calc(50% - 250px); top: 514px; width: 122px; height: 122px; display: grid; place-items: center; border-radius: 50%; background: #e53935; color: #fff; box-shadow: 0 10px 26px rgba(229,57,53,.34); transform-origin: center; transition: opacity .55s ease, transform .75s cubic-bezier(.2,.8,.2,1), top .75s cubic-bezier(.2,.8,.2,1), left .75s cubic-bezier(.2,.8,.2,1); }
.hello-bubble.is-floating { position: fixed; top: calc(50% + 98px); left: calc(50% - 250px); }
.hello-bubble.is-fading { opacity: 0; transform: translate(-16px, 16px) scale(.16); pointer-events: none; }
.hello-bubble span { font-size: 43px; letter-spacing: -.08em; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 24px; width: 40px; height: 20px; padding: 3px; transform: translateX(-50%); border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.64); }
.scroll-cue span { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); animation: scroll-cue 1.7s ease-in-out infinite; }
@keyframes scroll-cue { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }

/* Shared sections */
.service-section, .about-section { min-height: 720px; padding: 80px 5.75vw; display: flex; align-items: center; }
.section-grid { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.07fr .93fr; gap: 54px; }
.section-intro, .about-copy { align-self: start; }
.section-kicker { font-size: clamp(26px, 3.05vw, 43px); line-height: .97; letter-spacing: -.045em; }
.lede { max-width: 480px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.48; }
.service-list { align-self: center; }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.accordion-trigger span { font-family: var(--heading); font-size: 22px; letter-spacing: .015em; }
.accordion-trigger b { font-size: 24px; font-weight: 400; transition: transform .3s ease; }
.accordion-item.is-open .accordion-trigger b { transform: rotate(45deg); }
.accordion-panel { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.2,.8,.2,1); }
.accordion-panel p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.accordion-item.is-open .accordion-panel { padding-bottom: 15px; }

/* About */
.about-section { min-height: 848px; align-items: flex-start; }
.about-grid { align-items: center; }
.about-details { align-self: center; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding-bottom: 42px; }
.stat { text-align: center; }
.stat strong { display: block; font-family: var(--heading); font-size: 66px; font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.stat span { display: block; margin-top: 12px; color: var(--muted); font-size: 13px; }
.career-list { border-top: 1px solid var(--line); }
.career-item { border-bottom: 1px solid var(--line); }
.career-trigger { width: 100%; min-height: 68px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.career-trigger h3 { margin: 0; font-family: var(--heading); font-size: 22px; font-weight: 500; letter-spacing: .015em; }
.career-panel { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.2,.8,.2,1); }
.career-panel-inner { padding: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.career-panel-inner p { margin: 0; }
.career-panel-inner p + p { margin-top: 2px; }
.career-panel-inner ol { margin: 11px 0 0 1.35em; padding: 0; display: grid; gap: 7px; }
.career-panel-inner li { padding-left: 3px; }
.career-item.is-open .career-trigger h3 { color: var(--accent); }
.contact-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; padding: 26px 0 20px; border-top: 1px solid var(--line); }
.contact-lines a { color: var(--muted); font-size: 14px; }
.contact-lines span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 12px; }
.social-row { display: flex; gap: 12px; margin: 10px 0 28px; }
.social-row a, .footer-social a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.social-row a:hover, .footer-social a:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); }
.outline-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--heading); font-size: 16px; letter-spacing: .04em; transition: background .3s ease, color .3s ease, transform .3s ease; }
.outline-button span { font-family: var(--body); font-size: 19px; }
.outline-button:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); }

/* Projects */
.projects-section { min-height: 0; padding: 80px 5.75vw 28px; }
.section-heading { max-width: 1120px; margin: 0 auto 74px; }
.section-heading .lede { max-width: 520px; }
.projects-lede { text-align: left; }
.projects-grid { max-width: 1120px; margin: 0 auto; display: grid; gap: 18px; }
.project-card { position: relative; height: 747px; overflow: hidden; border-radius: 22px; background: #dededc; isolation: isolate; }
.project-media, .project-media img, .project-media video, .project-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-media img { object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.75,.2,1); }
.project-media video { display: block; object-fit: cover; }
.lazy-video { background: #dededc; }
.lazy-video.is-failed { background: #dededc; }
.project-overlay { z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 35%, transparent 48%, rgba(0,0,0,.6)); opacity: .78; transition: opacity .4s ease; }
.project-meta { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; color: #fff; text-align: center; }
.project-meta span { padding: 6px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: 12px; }
.project-meta h2 { max-width: 760px; margin: 16px 0 10px; font-family: var(--heading); font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -.035em; line-height: .98; }
.project-meta p { max-width: 430px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.project-card:hover .project-media img { transform: scale(1.065); }
.project-card:hover .project-overlay { opacity: .96; }
.centered-button { display: flex; width: fit-content; min-width: 240px; margin: 54px auto 0; }

/* All projects */
.insights-section { min-height: 0; padding: 62px 5.75vw 90px; }
.project-categories { max-width: 1120px; margin: 0 auto; display: grid; gap: 62px; }
.project-category { min-width: 0; }
.project-category-title { margin: 0 0 22px; font-family: var(--heading); font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.045em; line-height: .97; }
.project-stream { --stream-gap: 16px; --stream-half-gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 0 16px; cursor: grab; user-select: none; touch-action: pan-y; }
.project-stream::-webkit-scrollbar { display: none; }
.project-stream.is-dragging { cursor: grabbing; }
.project-stream:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.project-stream-track { display: flex; gap: var(--stream-gap); width: max-content; animation: none; }
.project-stream[data-marquee-stream] .project-stream-track { animation: project-marquee var(--marquee-duration, 60s) linear infinite; will-change: transform; }
.project-stream.is-dragging .project-stream-track { animation-play-state: paused; }
.project-stream-set { display: flex; flex: none; align-items: flex-start; gap: var(--stream-gap); }
.project-subitem { position: relative; flex: 0 0 270px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #dededc; margin-top: 22px; cursor: pointer; }
.project-subitem-featured { margin-top: 0; }
.project-subitem-offset { margin-top: 42px; }
.project-subitem img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s ease; }
.project-subitem video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s ease; }
.project-subitem video, .project-media video { pointer-events: none; }
.project-subitem::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.58)); pointer-events: none; }
.project-subitem span { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; font-size: 12px; letter-spacing: .04em; }
.project-subitem:hover img { transform: scale(1.05); }
.project-subitem:hover video { transform: scale(1.05); }
.project-subitem video::-webkit-media-controls,
.project-subitem video::-webkit-media-controls-enclosure,
.project-media video::-webkit-media-controls,
.project-media video::-webkit-media-controls-enclosure { display: none !important; }
@keyframes project-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--stream-half-gap))); } }
.insight-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.insight-image { height: 345px; overflow: hidden; border-radius: 20px; background: #dededc; }
.insight-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s ease; }
.insight-card:hover .insight-image img { transform: scale(1.05); }
.insight-info { padding: 24px 4px 0; }
.insight-info > span { color: var(--accent); font-size: 11px; letter-spacing: .06em; }
.insight-info i { margin-left: 14px; color: var(--muted); font-style: normal; }
.insight-info h3 { margin: 12px 0 8px; font-family: var(--heading); font-size: 28px; font-weight: 500; line-height: 1; }
.insight-info p { max-width: 420px; margin: 0; color: var(--muted); }

/* Video preview */
.media-modal { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 0; background: rgba(0,0,0,.82); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
.media-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.media-modal-backdrop { position: absolute; inset: 0; }
.media-modal-dialog { position: relative; z-index: 1; width: 100vw; height: 100vh; display: grid; place-items: center; padding: 16px; background: transparent; }
.media-modal-video { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); background: #000; object-fit: contain; }
.media-modal-video[hidden] { display: none; }
.media-modal-image { display: block; width: min(1200px, 100%); height: auto; margin: 0 auto; }
.media-modal-image[hidden] { display: none; }
.media-modal-dialog.is-image { display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.media-modal-dialog.is-image .media-modal-close { position: fixed; }
.media-modal-close { position: absolute; z-index: 2; top: 22px; right: 22px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 25px; line-height: 1; }
body.has-modal { overflow: hidden; }

/* Contact / footer */
.contact-section { width: min(1120px, calc(100% - 11.5vw)); min-height: 861px; margin: 0 auto; padding: 80px 0; display: grid; grid-template-columns: 1.07fr .93fr; gap: 54px; align-items: center; }
.contact-image { position: relative; width: min(100%, 520px); height: 620px; overflow: hidden; border-radius: 22px; background: #dededc; justify-self: start; }
.contact-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.contact-image span { position: absolute; left: 24px; bottom: 22px; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: #e53935; color: #fff; font-size: 28px; }
.contact-column { width: min(100%, 560px); justify-self: end; }
.contact-info-list { margin-top: 50px; border-top: 1px solid var(--line); }
.contact-info-item { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.contact-info-label { display: flex; gap: 9px; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.contact-info-value { margin: 0; color: var(--ink); font-size: 15px; }
.site-footer { padding: 34px 5.75vw 30px; border-top: 1px solid var(--line); }
.footer-bottom { max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; }
.footer-bottom b { color: var(--accent); }

/* Floating controls */
.theme-dock { position: fixed; z-index: 19; right: 34px; bottom: 22px; display: flex; align-items: center; gap: 10px; }
.theme-toggle { width: 40px; height: 20px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; }
.theme-toggle span { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); transition: transform .35s ease; }
body.is-dark .theme-toggle span { transform: translateX(18px); }
.framer-badge { min-height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px 0 9px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 90%, transparent); box-shadow: 0 5px 18px rgba(0,0,0,.08); font-size: 12px; }
.framer-badge b { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 12px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 30px; padding: 11px 18px; transform: translate(-50%, 20px); border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; font-size: 13px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cursor-dot, .cursor-label { position: fixed; z-index: 40; top: 0; left: 0; pointer-events: none; opacity: 0; }
.cursor-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease, opacity .2s ease; }
.cursor-label { padding: 7px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 10px; transform: translate(12px, 12px); }
@media (pointer: fine) { body.has-pointer .cursor-dot { opacity: 0; } }

@media (max-width: 900px) {
  .nav-links { gap: 0; }
  .nav-links a { font-size: 13px; }
  .nav-links .nav-contact { min-width: 96px; padding-inline: 12px; }
  .hero h1 { font-size: clamp(72px, 9vw, 110px); }
  .hero-copy-left { left: 7%; }
  .hero-copy-right { right: 5%; }
  .section-grid { gap: 34px; }
  .contact-section { gap: 34px; }
  .project-card { height: 620px; }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  .noise { opacity: .045; }
  .site-nav { top: 20px; width: calc(100% - 96px); min-width: 278px; height: 56px; padding: 7px 7px 7px 8px; }
  .nav-links { display: none; }
  .availability { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; padding-left: 3px; color: var(--muted); font-size: 13px; white-space: nowrap; }
  .availability i { width: 6px; height: 6px; border-radius: 50%; background: #46d382; box-shadow: 0 0 0 5px rgba(70,211,130,.12); }
  .menu-toggle { width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
  .menu-toggle span { width: 12px; height: 2px; display: block; background: #fff; transition: transform .3s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 65px; right: 0; width: 164px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 15px 38px rgba(0,0,0,.12); opacity: 0; transform: translateY(-10px) scale(.96); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
  .mobile-menu a { padding: 11px 12px; border-radius: 10px; color: var(--muted); }
  .mobile-menu a:hover { background: rgba(128,128,128,.1); color: var(--ink); }
  .site-nav.is-menu-open .mobile-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

  .hero { height: min(844px, 100svh); min-height: 680px; }
  .hero-video { object-position: center center; opacity: 1; }
  .hero::before { background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.4) 100%); }
  .hero-copy-left { left: 0; top: 188px; width: 100%; text-align: center; }
  .hero-copy-right { top: 561px; right: auto; left: 0; width: 100%; text-align: left; }
  .hero h1 { font-size: 58px; letter-spacing: -.06em; }
  .eyebrow, .section-label { margin-bottom: 10px; font-size: 15px; }
  .hero-copy-right p { max-width: 335px; margin: 14px 20px 0; font-size: 14px; line-height: 1.45; }
  .hero-portrait { top: 360px; width: 180px; height: 252px; }
  .portrait-face { border-radius: 15px; }
  .hello-bubble { left: calc(50% - 124px); top: 550px; width: 52px; height: 52px; }
  .hello-bubble.is-floating { top: calc(50% + 64px); left: calc(50% - 124px); }
  .hello-bubble span { font-size: 18px; }
  .scroll-cue { display: block; }

  .service-section, .about-section, .insights-section { min-height: 0; padding: 80px 20px; display: block; }
  .about-section { min-height: 1180px; }
  .section-grid { display: block; }
  .section-intro, .about-copy, .section-heading { margin-bottom: 42px; }
  .section-kicker { margin-bottom: 20px; font-size: 39px; }
  .lede { font-size: 16px; line-height: 1.48; }
  .service-list { width: 100%; }
  .accordion-trigger { min-height: 72px; }
  .accordion-trigger span { font-size: 20px; }
  .accordion-panel p { font-size: 14px; }

  .about-details { margin-top: 42px; }
  .stats-row { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .stat strong { font-size: 58px; }
  .career-trigger { min-height: 64px; }
  .career-trigger h3 { font-size: 20px; }
  .career-panel-inner { font-size: 14px; }
  .contact-lines { grid-template-columns: 1fr; gap: 20px; }
  .social-row { margin-top: 10px; }
  .outline-button { width: 100%; }

  .projects-section { min-height: 0; padding: 80px 20px 24px; }
  .projects-section .section-heading { margin-bottom: 42px; }
  .projects-grid { gap: 16px; }
  .project-card { height: auto; min-height: 433px; border-radius: 16px; }
  .project-media { position: relative; height: 350px; }
  .project-media img { position: absolute; }
  .project-overlay { display: none; }
  .project-meta { position: relative; inset: auto; min-height: 83px; align-items: flex-start; justify-content: flex-start; padding: 18px 0 0; color: var(--ink); text-align: left; }
  .project-meta span { padding: 0; border: 0; color: var(--accent); font-size: 11px; }
  .project-meta h2 { margin: 8px 0 0; font-size: 25px; line-height: 1.02; }
  .project-meta p { display: none; }
  .centered-button { margin-top: 42px; }

  .insights-section { min-height: 0; padding: 62px 20px 80px; }
  .project-categories { gap: 46px; }
  .project-category-title { margin-bottom: 18px; font-size: 25px; }
  .project-stream { --stream-gap: 12px; --stream-half-gap: 6px; padding-bottom: 14px; }
  .project-subitem { flex-basis: 220px; border-radius: 14px; margin-top: 18px; }
  .project-subitem-featured { margin-top: 0; }
  .project-subitem-offset { margin-top: 32px; }
  .project-media, .project-subitem { isolation: isolate; }
  .project-media .video-poster-fallback, .project-subitem .video-poster-fallback { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 1; visibility: visible; transition: opacity .2s ease; }
  .video-poster-fallback.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .project-media video.video-poster-pending, .project-subitem video.video-poster-pending { z-index: 1; opacity: 0; }
  .project-media video.video-poster-ready, .project-subitem video.video-poster-ready { z-index: 1; opacity: 1; }
  .project-subitem:hover .video-poster-fallback { transform: none; }
  .media-modal { padding: 0; }
  .media-modal-dialog { width: 100vw; height: 100vh; padding: 16px; border-radius: 0; }
  .media-modal-video { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .media-modal-close { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 22px; }

  .contact-section { width: 100%; min-height: 0; margin: 0; padding: 80px 20px 90px; display: block; }
  .contact-image { width: 100%; height: 390px; margin-bottom: 58px; border-radius: 16px; }
  .contact-image span { width: 54px; height: 54px; left: 18px; bottom: 18px; font-size: 19px; }
  .contact-column { width: 100%; }
  .contact-info-list { margin-top: 36px; }

  .site-footer { padding: 34px 20px 100px; }
  .footer-bottom { display: grid; gap: 14px; margin-top: 0; }
  .theme-dock { right: 18px; left: 18px; bottom: 18px; justify-content: space-between; }
  .framer-badge { min-height: 40px; }
  .toast { bottom: 82px; }
  .cursor-dot, .cursor-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .project-stream-track { animation: none !important; }
}