.work-document { scroll-behavior: auto; scrollbar-gutter: stable; }
.work-page { margin: 0; background: #1f1f1f; color: #e5e5e5; font: 16px/1.65 Poppins, sans-serif; overflow-x: clip; }
.work-page a { color: inherit; }
.work-page h1, .work-page h2, .work-page h3 { font-family: futura, sans-serif; font-weight: 500; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; padding: 12px 18px; background: #00b7a2; border-radius: 24px; }
.skip-link:focus { top: 12px; }
.work-shell, .case-shell { max-width: 1600px; margin: auto; padding: 0 clamp(22px, 3.4vw, 64px); }
.work-intro { padding: clamp(64px, 7vw, 112px) 0 42px; }
.work-eyebrow { margin: 0 0 22px; color: #21bbd0; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.work-intro h1 { max-width: 1280px; margin: 0; padding-bottom: .13em; font-size: clamp(46px, 7vw, 108px); line-height: 1.12; letter-spacing: -.035em; overflow: visible; }
.work-lead { max-width: 760px; margin: 18px 0 0; color: #b1b1b1; font-size: clamp(15px, 1.25vw, 18px); }
.work-categories { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 42px; }
.category-pill { padding: 13px 22px; border: 0; border-radius: 999px; background: #353535; color: #e5e5e5; font: 14px/1.2 Poppins, sans-serif; cursor: pointer; transition: background 250ms, color 250ms, translate 250ms; }
.category-pill.active { background: #00b7a2; color: #fff; }
.category-pill:hover { background: #4b4b4b; translate: 0 -2px; }
.category-pill.active:hover { background: #009c8a; }
.filter-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) 24px; }
.work-card { min-width: 0; }
.work-card[hidden] { display: none; }
.work-card-wide { grid-column: 1 / -1; }
.project-link { display: block; text-decoration: none; }
.project-visual { position: relative; aspect-ratio: 1.08; overflow: hidden; border-radius: clamp(20px, 2.5vw, 38px); background: #303030; isolation: isolate; }
.work-card-wide .project-visual { aspect-ratio: 1.82; }
.project-art { position: relative; width: 100%; height: 100%; min-height: 280px; background: var(--art-bg, #dcece8); color: #243938; overflow: hidden; isolation: isolate; }
.art-halo { position: absolute; width: 66%; aspect-ratio: 1; border: 1px solid #fff8; border-radius: 50%; left: 17%; top: -14%; scale: 1.3; opacity: .55; }
.art-halo::after { content: ''; position: absolute; inset: 14%; border-radius: inherit; background: #fff3; }
.art-layer { position: absolute; inset: 9%; transform: translateY(var(--parallax-y, 0px)); transition: scale 1000ms cubic-bezier(.22,1,.36,1); }
.art-primary { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.art-accent { position: absolute; right: -3%; bottom: -5%; width: 24%; height: 30%; object-fit: contain; translate: 0 6%; transition: translate 800ms cubic-bezier(.22,1,.36,1), rotate 800ms; filter: drop-shadow(0 15px 20px #152e331c); }
.project-link:hover .art-layer, .project-link:focus-visible .art-layer { scale: 1.035; }
.project-link:hover .art-accent { translate: 0 -5%; rotate: -3deg; }
.art-photo .art-layer { inset: 0; }
.art-photo .art-primary { object-fit: cover; }
.art-photo .art-halo { display: none; }
.art-cutout .art-layer { inset: 8% 12%; }
.art-cutout .art-primary { filter: drop-shadow(0 25px 35px #1113); }
.art-devices .art-primary { width: 43%; left: 10%; rotate: -8deg; border-radius: 18px; box-shadow: 0 24px 50px #2344; }
.art-devices .art-accent { width: 43%; height: 90%; right: 8%; bottom: 0; rotate: 8deg; border-radius: 18px; }
.art-interface .art-layer { inset: 12% 8%; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 55px #19383c30; }
.art-interface .art-primary { object-fit: cover; object-position: top; }
.art-esd .art-layer { inset: 5% 16%; }
.art-esd .art-primary { mix-blend-mode: multiply; }
.art-snapstitch .art-layer { inset: 12% 20%; }
.art-strum .art-primary { rotate: -12deg; }
.art-ravenhaul .art-layer { inset: 15% 24%; }
.project-open { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1f1f1fe6; color: #fff; font: 24px/1 futura, sans-serif; opacity: 0; translate: 0 10px; transition: opacity 300ms, translate 500ms; }
.project-link:hover .project-open, .project-link:focus-visible .project-open { opacity: 1; translate: 0 0; }
.project-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 2px 0; }
.project-caption h2 { margin: 0 0 5px; font-size: clamp(25px, 2.25vw, 34px); line-height: 1.3; }
.project-caption p { max-width: 700px; margin: 0; color: #aaa; font-size: 13px; }
.project-year { color: #aaa; font-size: 12px; }
.work-shell { padding-bottom: 100px; }
.case-shell { padding-top: 40px; }
.case-back { display: inline-block; margin-bottom: 42px; font-size: 13px; color: #b1b1b1 !important; text-underline-offset: 5px; }
.case-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: start; gap: clamp(30px, 5vw, 80px); }
.case-copy { position: sticky; top: 40px; padding: 16px 0 0; }
.case-copy h1 { margin: 0 0 24px; padding-bottom: .1em; font-size: clamp(38px, 3.5vw, 56px); line-height: 1.13; letter-spacing: -.025em; overflow-wrap: anywhere; overflow: visible; }
.case-copy > p { color: #aaa; font-size: 13px; }
.case-copy .work-eyebrow { color: #21bbd0; font-size: 11px; }
.case-copy .case-summary { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: #e5e5e5; margin: 28px 0 18px; }
.website-link { display: inline-flex; align-items: center; gap: 22px; padding: 10px 0 6px; border-bottom: 1px dotted currentColor; font-size: 13px; line-height: 1.4; text-decoration: none; }
.website-link span { transition: translate 250ms; }
.website-link:hover span { translate: 3px -3px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 26px 0; padding: 0; list-style: none; }
.case-tags li { border: 1px solid #64cec033; border-radius: 999px; background: #64cec00d; color: #bfe3dc; padding: 5px 10px; font-size: 11px; }
.case-date { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ffffff26; }
.case-media { min-width: 0; }
.case-frame { margin: 0 0 24px; }
.case-frame .project-art { aspect-ratio: 1.12; border-radius: 24px; }
.case-frame:nth-child(even) .project-art { aspect-ratio: .96; }
.case-frame figcaption { margin: 14px 8px 22px; color: #999; font-size: 11px; }
.case-next { padding: 80px 0 100px; }
.case-next a { display: flex; justify-content: space-between; gap: 24px; font: clamp(32px, 4vw, 64px)/1.3 futura, sans-serif; text-decoration: none; }
.work-page :is(a, button):focus-visible { outline: 2px solid #00b7a2; outline-offset: 6px; }
.work-motion-ready [data-reveal] { opacity: 0; translate: 0 48px; transition: opacity 700ms ease, translate 1000ms cubic-bezier(.22,1,.36,1); }
.work-motion-ready [data-reveal].is-visible { opacity: 1; translate: 0 0; }
/* The word masks include font descenders; masks are removed after entrance. */
.headline-word { display: inline-block; vertical-align: top; padding: .06em .04em .2em; margin: -.06em -.04em -.2em; overflow: clip; }
.headline-word > span { display: inline-block; animation: title-rise 1000ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--word-index) * 55ms); }
@keyframes title-rise { from { translate: 0 125%; } to { translate: 0 0; } }
.project-sheet { position: fixed; inset: 30px 22px 0; width: auto; max-width: 1540px; height: calc(100dvh - 30px); max-height: none; margin: 0 auto; padding: 0; border: 0; border-radius: 32px 32px 0 0; background: #242424; color: #e5e5e5; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.project-sheet::-webkit-scrollbar-track { margin-top: 32px; margin-bottom: 12px; }
.project-sheet::backdrop { background: #0008; backdrop-filter: blur(3px); }
.project-sheet[open] { animation: sheet-rise 650ms cubic-bezier(.22,1,.36,1) both; }
.project-sheet.is-closing { animation: sheet-leave 300ms ease both; }
.sheet-surface { position: relative; padding: 34px clamp(24px, 4vw, 60px); min-height: 100%; }
.sheet-close { position: sticky; float: right; top: 18px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; margin: -12px -12px 0 12px; padding: 0; border: 0; border-radius: 50%; background: #1f1f1fe6; color: #fff; font: 30px/1 Poppins, sans-serif; cursor: pointer; }
.project-sheet .case-copy { top: 18px; }
.project-sheet .case-layout { gap: clamp(28px, 4vw, 60px); }
.sheet-open { overflow: hidden; }
@keyframes sheet-rise { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes sheet-leave { to { translate: 0 100%; opacity: .4; } }
.workflow-diagram { display: flex; align-items: center; justify-content: center; gap: 3%; height: 100%; }
.workflow-node { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; width: 26%; aspect-ratio: .9; border: 1px solid #34665a25; border-radius: 18px; background: #ffffffbc; box-shadow: 0 20px 40px #224b4212; font: clamp(12px, 1.6vw, 22px)/1.4 futura, sans-serif; }
.workflow-connector { color: #2a8875; font-size: clamp(14px, 2.4vw, 32px); }
.diagram-dots { letter-spacing: 5px; color: #e68a76; }
.diagram-lines { width: 45%; height: 24px; border-block: 3px solid #e3a056; }
.diagram-check { color: #00a68e; font-size: 30px; }
.planning-diagram { position: absolute; inset: 15% 2%; padding: 24px; background: #ffffffbc; border: 1px solid #564c6b20; border-radius: 20px; box-shadow: 0 25px 60px #4b415b12; overflow: hidden; }
.planning-axis { display: flex; justify-content: space-between; font: 13px/1.4 futura, sans-serif; color: #625c70; padding-bottom: 30px; border-bottom: 1px solid #665d7520; }
.planning-bar { position: relative; display: block; width: 48%; height: 13%; margin-top: 8%; border-radius: 999px; background: #64cec0; }
.planning-bar:nth-of-type(2) { margin-left: 22%; background: #e3a056; }
.planning-bar:nth-of-type(3) { margin-left: 45%; background: #e68a76; }
.planning-marker { position: absolute; width: 1px; height: 77%; top: 18%; left: 57%; border-left: 1px dashed #5c536c70; }
@media (max-width: 767px) {
 .work-intro { padding: 54px 0 30px; }
 .work-categories { margin-bottom: 30px; }
 .category-pill { padding: 12px 18px; font-size: 12px; }
 .work-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
 .project-visual, .work-card-wide .project-visual { aspect-ratio: 1.2; }
 .project-open { opacity: 1; translate: 0 0; width: 36px; height: 36px; right: 15px; bottom: 15px; font-size: 20px; }
 .project-caption p { font-size: 12px; }
 .case-shell { padding-top: 28px; }
 .case-back { margin-bottom: 24px; }
 .case-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .case-copy { position: static; padding-top: 0; }
 .case-copy h1 { font-size: 42px; }
 .case-frame .project-art, .case-frame:nth-child(even) .project-art { aspect-ratio: 1.12; }
 .project-sheet { inset: 12px 8px 0; height: calc(100dvh - 12px); border-radius: 24px 24px 0 0; }
 .project-sheet::-webkit-scrollbar-track { margin-top: 24px; }
 .sheet-surface { padding: 28px 20px; }
 .sheet-close { top: 12px; margin-right: -6px; }
 .case-next { padding: 44px 0 60px; }
 .workflow-node { gap: 18px; }
 .planning-diagram { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
 .work-motion-ready [data-reveal], .headline-word > span { opacity: 1; translate: none; animation: none; transition: none; }
 .art-layer, .art-accent { transform: none !important; scale: none !important; translate: none !important; transition: none; }
 .project-sheet[open], .project-sheet.is-closing { animation: none; }
 .category-pill, .project-open, .website-link span { transition: none; }
}
/* Keep the smaller original photography crisp inside composed artboards. */
.art-photo-pair .art-layer { inset: 12% 8%; max-width: 650px; margin-inline: auto; }
.art-photo-pair .art-primary { top: 5%; left: 3%; width: 58%; height: 65%; object-fit: cover; border: 9px solid #fff; border-radius: 14px; rotate: -6deg; box-shadow: 0 24px 40px #6b403b20; }
.art-photo-pair .art-accent { right: 2%; bottom: 4%; width: 47%; height: 55%; object-fit: cover; border: 9px solid #fff; border-radius: 14px; rotate: 7deg; box-shadow: 0 24px 40px #6b403b20; }
.art-photo-pair.art-alternate .art-primary { top: 16%; left: 20%; width: 60%; height: 65%; rotate: 4deg; }
.art-tma .art-layer { max-width: 600px; margin-inline: auto; }
.project-caption>div{min-width:0}.project-year{text-align:right;flex-shrink:0}.project-year small{display:block;font-size:9px;color:#909090;white-space:nowrap;margin-top:3px}
.art-purplepay .art-accent{display:none}

/* Named enterprise cases carry concise, source-backed project detail. */
.case-documented .case-copy { position: static; }
.case-detail { margin-top: 25px; }
.case-detail h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; color: #ddd; }
.case-detail p { margin: 0; font-size: 13px; color: #aaa; }
.art-case-diagram .art-primary { width: 100%; height: 100%; object-fit: contain; }
.art-case-diagram .art-halo { opacity: .3; }

/* Curated covers: source-specific compositions, without automatic icon enlargements. */
.art-studio .art-halo,.art-app-screens .art-halo{display:none}
.art-studio .art-layer{inset:0}
.art-studio .art-primary{object-fit:cover}
.esd-studio,.raven-editorial,.snap-studio{position:absolute;inset:0;container-type:size}
.esd-studio{background:#252d38;color:#d8b474;overflow:hidden}
.esd-studio::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#d8b4740b 1px,transparent 1px),linear-gradient(90deg,#d8b4740b 1px,transparent 1px);background-size:7% 7%}
.esd-identity{position:absolute;left:8%;top:9%;display:flex;align-items:center;gap:5%;width:72%;font:500 5.4cqw/1.15 futura,sans-serif;letter-spacing:-.03em}
.esd-identity img{width:21%;height:auto;max-height:16cqh;object-fit:contain}
.esd-plan{position:absolute;left:14%;top:32%;width:83%;height:52%;padding:4%;background:#f0ebe1;box-shadow:0 3cqh 8cqh #0004;transform:rotate(-10deg) skewX(3deg);border:1px solid #fff5}
.esd-plan::after{content:'';position:absolute;inset:4%;border:1px solid #9c875e55}
.esd-plan img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.esd-rule{position:absolute;bottom:11%;left:8%;width:12%;height:2px;background:#c7a565}
.esd-discipline{position:absolute;bottom:8%;left:8%;font:1.45cqw/1.2 Poppins,sans-serif;letter-spacing:.22em;color:#c2b393}
.raven-editorial{background:#ece3d7;color:#312f35;overflow:hidden}
.raven-editorial::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 5%,#9883750e 5%,#9883750e 5.2%)}
.raven-masthead{position:absolute;left:8%;top:8%;font:500 7cqw/1 futura,sans-serif;letter-spacing:-.05em}
.raven-masthead span{display:block;margin-top:1.4cqh;font:1.35cqw/1.3 Poppins,sans-serif;letter-spacing:.23em;color:#877f79}
.raven-paper{position:absolute;left:7%;top:29%;width:58%;height:55%;padding:5%;background:#fffaf0;box-shadow:0 2cqh 6cqh #69534520;transform:rotate(-5deg);border-bottom:5px solid #d8c8b0}
.raven-topic{font:1.3cqw/1.4 Poppins,sans-serif;letter-spacing:.18em;color:#977b68}
.raven-paper h3{font:400 5.9cqw/1.08 Georgia,serif;color:#42383d;margin:3cqh 0}
.raven-underline{display:block;width:28%;height:3px;background:#bd8f72;margin:4cqh 0}
.raven-author{font:1.6cqw/1.4 Poppins,sans-serif;color:#716359}
.raven-portrait{position:absolute;right:6%;top:24%;width:34%;height:67%;margin:0;padding:1.6% 1.6% 7%;background:#fefbf4;transform:rotate(7deg);box-shadow:0 2cqh 6cqh #55412d30}
.raven-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.6)}
.snap-studio{background:#eee0c3;color:#292e35;overflow:hidden}
.snap-studio::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#8e805018 1px,transparent 1px),linear-gradient(90deg,#8e805018 1px,transparent 1px);background-size:5% 5%}
.snap-identity{position:absolute;left:8%;top:10%;font:italic 500 7.7cqw/1 Georgia,serif;letter-spacing:-.065em}
.snap-identity span{display:block;margin-top:2cqh;font:1.25cqw/1.3 Poppins,sans-serif;letter-spacing:.27em;color:#8a7651}
.snap-pattern{position:absolute;left:-6%;top:27%;width:65%;height:75%;transform:rotate(-9deg)}
.snap-garment{position:absolute;right:6%;top:12%;height:81%;width:43%;background:#faf6e8;border:1px solid #aa976b35;border-radius:2%;padding:5% 4%;box-shadow:0 2cqh 5cqh #715d3029;transform:rotate(8deg)}
.snap-garment img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 10px #513b221a)}
.snap-stitch-line{position:absolute;left:8%;bottom:8%;width:20%;border-top:2px dashed #806b3d}
.art-app-screens .art-layer{inset:7% 5%;display:flex;align-items:center;justify-content:center;gap:3%}
.app-preview-screen{flex:0 0 28%;height:90%;border-radius:2cqw;overflow:hidden;box-shadow:0 2cqh 5cqh #65507130;background:#f8f8f7;border:3px solid #fff}
.app-preview-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.app-preview-screen:first-child{transform:translateY(3%) rotate(-7deg)}
.app-preview-screen:last-child{transform:translateY(3%) rotate(7deg)}
.app-store-links{display:flex;flex-wrap:wrap;gap:22px;margin:10px 0 20px}
.app-store-links a{padding:7px 0 5px;border-bottom:1px dotted currentColor;text-decoration:none;font-size:13px;color:#e5e5e5}
.app-store-links a:hover{color:#64cec0}
.app-store-links span{margin-left:12px}
.app-screen-note{margin:0 0 24px;color:#aaa;font-size:11px;line-height:1.7}
.app-screen-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-items:start}
.app-screen-gallery figure{margin:0;min-width:0}
.app-screen-gallery figure:last-child{grid-column:1/-1;width:calc(50% - 12px);justify-self:center}
.app-screen-gallery img{width:100%;height:auto;display:block;border:1px solid #ffffff26;border-radius:20px}
.app-screen-gallery figcaption{font-size:12px;color:#aaa;margin:12px 2px 0}
.case-selected-image>img{display:block;width:100%;height:auto;border-radius:24px}
@media(max-width:767px){.app-screen-gallery{grid-template-columns:minmax(0,1fr);gap:30px}.app-screen-gallery figure,.app-screen-gallery figure:last-child{width:min(100%,380px);justify-self:center;grid-column:auto}.app-screen-gallery img{border-radius:18px}.raven-paper h3{font-size:6.4cqw}.app-store-links{gap:20px}}

/* The added desktop applications keep their full source-screen proportions. */
.app-screen-gallery-desktop{grid-template-columns:minmax(0,1fr)}
.app-screen-gallery-desktop figure,.app-screen-gallery-desktop figure:last-child{width:100%;grid-column:auto}
.app-screen-gallery-desktop img{border-radius:14px}

/* A compact collection, using the homepage type hierarchy. */
.work-shell, .case-shell { max-width: 1360px; }
.work-intro { padding: 36px 0 24px; }
.work-intro h1 { max-width: none; font-size: 3rem; line-height: 1.2; letter-spacing: -.02em; padding-bottom: .12em; }
.work-intro .work-eyebrow { margin-bottom: 12px; }
.work-lead { margin-top: 12px; font-size: 1.35rem; color: #b1b1b1; }
.work-categories { gap: 8px; margin-bottom: 26px; }
.category-pill { padding: 11px 18px; font-size: 1.2rem; }
.work-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 22px; }
.work-card-wide { grid-column: auto; }
.project-visual, .work-card-wide .project-visual { aspect-ratio: 1.42; border-radius: 22px; }
.project-caption { gap: 12px; padding-top: 14px; align-items: start; }
.project-caption h2 { font-size: 2.05rem; line-height: 1.25; font-weight: 500; }
.project-caption p { font-size: 1.2rem; line-height: 1.65; color: #b1b1b1; }
.project-year { flex-shrink: 0; padding-top: 4px; font-size: 1rem; }
.project-open { width: 34px; height: 34px; right: 14px; bottom: 14px; font-size: 20px; }
.project-destinations { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.case-copy h1 { font-size: clamp(28px,3rem,42px); }
.case-copy p { font-size: 1.25rem; }
.case-original-art { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width:1099px) and (min-width:768px) { .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) {
 .work-intro { padding: 28px 0 22px; }
 .work-intro h1 { font-size: 3.2rem; }
 .work-lead { font-size: 1.6rem; }
 .work-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .project-caption h2 { font-size: 2.4rem; }
 .project-caption p { font-size: 1.6rem; }
 .project-year { font-size: 1.3rem; }
 .category-pill { font-size: 1.5rem; }
 .case-copy p { font-size: 1.7rem; }
}