.odc-shell{aspect-ratio:1.1;isolation:isolate;max-height:68vh;overflow:visible!important;position:relative;width:90%;transform:translateX(-5%)}
.odc-shell img{display:block;height:auto;margin:0;max-width:none;width:100%}
.odc-backdrop{background:#e0e5db;height:75%;left:8%;position:absolute;top:7%;transform:rotate(-5deg);width:46%;z-index:-1}
.odc-piece{position:absolute;will-change:opacity,transform}
.has-discipline-motion .ojch-discipline-panel:not(.is-active) .odc-piece{opacity:0}
.has-discipline-motion .ojch-discipline-panel.is-active .odc-piece{animation:odc-arrive .8s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--delay,0ms)}
@keyframes odc-arrive{from{opacity:0;transform:translate(var(--x,0),var(--y,1.5rem)) rotate(var(--r,-1deg))}to{opacity:1;transform:translate(0,0) rotate(0)}}

/* 01 / Writing */
.odc-publications{align-items:center;display:flex;flex-wrap:wrap;gap:.45rem 6%;left:3%;position:absolute;top:10%;width:55%;z-index:5}
.odc-publications p{color:#716b62;flex:0 0 100%;font:500 10px/1.2 Arial,sans-serif;letter-spacing:.13em;margin:0;text-transform:uppercase}
.odc-publications img{position:relative;width:22%;--delay:180ms;--y:1rem}.odc-publications img:first-of-type{width:27%;--delay:80ms}.odc-publications img:last-of-type{width:17%;--delay:280ms}
.odc-writing__portrait{border-radius:50%;right:0;top:0;width:37%!important;z-index:1;--delay:90ms;--x:2rem;--y:0}
.odc-magazine{background:#fff;border-radius:2px 2px 8px 8px;box-shadow:0 3px 0 #e3dfd5,0 6px 0 #f4f0e7,0 18px 30px #24221b26;left:0;overflow:hidden;top:24%;width:65%;z-index:2;--delay:180ms;--x:-2rem}
.odc-magazine span{background:linear-gradient(90deg,transparent 45%,#00000006 48%,#00000023 50%,#ffffff33 51%,transparent 55%);inset:0;position:absolute}
.odc-laptop{background:#303132;border:8px solid #303132;border-bottom-width:14px;border-radius:10px 10px 3px 3px;bottom:5%;box-shadow:0 19px 22px #24221b22;left:20%;width:55%;z-index:4;--delay:420ms;--y:2rem}
.odc-laptop:after{background:linear-gradient(#d2d4d4,#939898);border-radius:0 0 50% 50%;bottom:-25px;box-shadow:0 5px 8px #0002;content:"";height:12px;left:-7%;position:absolute;right:-7%}
.odc-writing__phone{background:#292c2c;border:6px solid #292c2c;border-radius:20px;bottom:6%;box-shadow:0 15px 25px #24221b25;overflow:hidden;right:13%;width:17%;z-index:3;--delay:340ms;--x:2rem}
.odc-writing__phone img{border-radius:14px}

/* 02 / UX, UI and search. All screenshots are supplied work evidence. */
.odc-ux{width:94%;transform:translateX(-6%)}.odc-ux .odc-backdrop{background:#dfe7e2;height:78%;left:12%;top:9%;width:55%}
.odc-sitemap{background:#fff;box-shadow:0 12px 28px #26352e18;display:grid;gap:.45rem;grid-template-columns:repeat(3,1fr);left:5%;padding:1rem;top:0;transform:rotate(-4deg);width:34%;z-index:1;--delay:40ms;--x:-2rem}
.odc-sitemap small{color:#718377;font:9px Arial,sans-serif;grid-column:1/-1;letter-spacing:.12em;text-transform:uppercase}.odc-sitemap strong{background:#d4dfd5;font:500 9px Arial,sans-serif;grid-column:2;padding:.35rem;text-align:center}.odc-sitemap span{background:#edf1ec;font:8px Arial,sans-serif;padding:.4rem;text-align:center}
.odc-tablet{background:#242829;border:10px solid #242829;border-radius:22px;box-shadow:0 18px 35px #24332c2a;left:0;overflow:hidden;top:18%;transform:rotate(-2deg);width:72%;z-index:2;--delay:130ms;--x:-2rem}
.odc-tablet img{aspect-ratio:1.93;object-fit:cover;object-position:top}
.odc-seo{background:#fff;border-radius:6px;box-shadow:0 12px 28px #26352e1f;overflow:hidden;padding:.55rem;z-index:4;--x:2rem}
.odc-seo b{color:#df672e;display:block;font:700 8px Arial,sans-serif;letter-spacing:.08em;margin:0 0 .35rem;text-transform:uppercase}.odc-seo img{height:100%;object-fit:cover;object-position:top}
.odc-seo--one{right:0;top:2%;width:38%;height:27%;--delay:210ms}.odc-seo--two{bottom:0;left:1%;width:37%;height:31%;--delay:310ms;--x:-2rem}
.odc-figma{background-color:#f1f1f4;background-image:radial-gradient(#c8cad2 .6px,transparent .6px);background-size:14px 14px;border-radius:9px;bottom:0;box-shadow:0 16px 34px #24332c24;height:58%;right:0;width:65%;z-index:5;--delay:370ms;--y:2rem}
.odc-figma__bar{align-items:center;background:#fff;border-radius:9px 9px 0 0;display:flex;height:10%;padding:0 .8rem}.odc-figma__bar i{color:#8d65dc;font:700 13px Arial;margin-right:.7rem}.odc-figma__bar span{font:10px Arial}.odc-figma__bar small{color:#7d7e86;font:7px Arial;margin-left:auto}
.odc-figma__tools{background:#303138;bottom:0;display:flex;flex-direction:column;gap:.8rem;left:0;padding:.8rem .55rem;position:absolute;top:10%;width:7%}.odc-figma__tools i{background:#777b84;border-radius:2px;height:9px;width:9px}.odc-figma__tools i:nth-child(2){background:#ae8bdc}
.odc-phone{float:left;margin:8% 0 0 10%;position:relative;width:19%}.odc-phone+ .odc-phone{margin-left:8%;margin-top:13%}.odc-phone:last-child{margin-top:7%}.odc-phone figcaption{color:#74757e;font:7px Arial;left:0;position:absolute;top:-1.1rem;white-space:nowrap}.odc-phone>div{background:#34373b;border:4px solid #34373b;border-radius:15px;box-shadow:0 8px 16px #1e202228;overflow:hidden}.odc-phone img{aspect-ratio:.46;object-fit:cover;object-position:top}.odc-phone.is-selected:after{border:1px solid #a582dc;content:"";inset:-7px;position:absolute}

/* 03 / Brand and visual design. A newly authored, client-neutral system. */
.odc-design{width:91%;transform:translateX(-5%)}.odc-design .odc-backdrop{background:#e8dbd1;height:82%;left:7%;width:52%}
.odc-design__brief{background:#24372f;box-shadow:0 16px 32px #392f2926;color:#f9f6ef;left:0;padding:1.5rem;top:10%;width:42%;z-index:2;--delay:80ms;--x:-2rem}
.odc-design__brief small,.odc-archetype small,.odc-values small{display:block;font:8px Arial;letter-spacing:.13em;text-transform:uppercase}.odc-design__brief h3{font:400 clamp(1.2rem,2vw,2.1rem)/1.06 Georgia,serif;margin:1.2rem 0}.odc-design__brief p{font:11px/1.45 Arial;margin:0;max-width:24ch}
.odc-swatches{display:flex;gap:.4rem;margin-top:1.3rem}.odc-swatches i{background:#d9c2a9;border-radius:50%;height:20px;width:20px}.odc-swatches i:nth-child(2){background:#a9b8ae}.odc-swatches i:nth-child(3){background:#bd8429}.odc-swatches i:nth-child(4){background:#f9f6ef}
.odc-archetype{background:#fffdf9;border:1px solid #d9d3c7;box-shadow:0 14px 28px #392f2918;padding:1.1rem;position:absolute;width:31%;z-index:3}.odc-archetype b{border-bottom:1px solid #d4cec2;color:#50685c;display:block;font:39px Georgia;padding:.6rem 0}.odc-archetype h3{font:400 21px Georgia;margin:.7rem 0}.odc-archetype p{font:10px/1.45 Arial;margin:0}.odc-archetype--one{right:27%;top:2%;--delay:170ms;--y:-2rem}.odc-archetype--two{bottom:4%;left:31%;--delay:280ms;--y:2rem}.odc-archetype--three{bottom:0;right:0;--delay:390ms;--x:2rem}
.odc-values{background:#f4efe7;border:1px solid #d1c6b8;display:grid;gap:.45rem;grid-template-columns:1fr 1fr;padding:1rem;right:0;top:8%;width:26%;z-index:1;--delay:460ms;--x:2rem}.odc-values small{grid-column:1/-1;margin-bottom:.2rem}.odc-values span{border-top:1px solid #b9ac9d;font:9px Arial;padding-top:.35rem}

/* 04 / Film and motion. The gimbal portrait is intentionally retained. */
.odc-motion{width:91%;transform:translateX(-5%)}.odc-motion .odc-backdrop{background:#e9dfc8;height:76%;left:8%;top:8%;width:45%}
.odc-motion__portrait{border-radius:50%;right:0;top:0;width:46%!important;z-index:1;--delay:60ms;--x:2rem}
.odc-storyboard{background:#252420;border:8px solid #252420;box-shadow:0 16px 30px #24221b20;overflow:hidden;z-index:3}.odc-storyboard img{height:100%;object-fit:cover;object-position:left top}
.odc-storyboard--hero{height:42%;left:0;top:23%;width:59%;--delay:170ms;--x:-2rem}.odc-storyboard--strip{bottom:6%;height:23%;left:6%;width:84%;--delay:280ms;--y:2rem}.odc-storyboard--strip img{object-position:left 62%}
.odc-film-note{align-items:center;background:#fffdf9;bottom:0;box-shadow:0 10px 20px #24221b1f;display:flex;gap:.45rem;left:1%;padding:.7rem .8rem;width:58%;z-index:4;--delay:380ms;--x:-2rem}.odc-film-note small{font:7px Arial;letter-spacing:.1em;margin-right:auto;text-transform:uppercase}.odc-film-note strong{font:8px Arial}.odc-film-note i{background:#b78026;border-radius:50%;height:4px;width:4px}
.odc-timecode{background:#252420;color:#f8f4ec;font:10px monospace;padding:.45rem .65rem;right:7%;top:5%;z-index:5;--delay:430ms;--y:-1rem}.odc-timecode span{color:#e45246;margin-left:.7rem}

@media(min-width:961px){.odc-shell{max-width:calc((100svh - 205px)*1.1);justify-self:start}}
@media(max-width:960px){.ojch-discipline-panel:has(.odc-shell){padding-top:1.5rem;padding-bottom:5.5rem}.ojch-discipline-panel:has(.odc-shell) h1,.ojch-discipline-panel:has(.odc-shell) h2{font-size:clamp(2.2rem,8vw,4rem);line-height:.96;margin:.55rem 0}.ojch-discipline-panel:has(.odc-shell) .ojch-discipline-panel__description{font-size:1rem;margin:.65rem 0}.ojch-discipline-panel:has(.odc-shell) ul{margin:.7rem 0}.odc-shell{margin:1rem auto 0;transform:none;width:min(94%,620px)}}
@media(max-width:560px){.odc-shell{aspect-ratio:.86;width:min(96%,360px)}.odc-publications{top:9%;width:61%}.odc-publications p{font-size:7px}.odc-magazine{top:24%;width:82%}.odc-laptop{bottom:8%;left:7%;width:65%;border-width:4px;border-bottom-width:8px}.odc-laptop:after{bottom:-16px;height:8px}.odc-writing__phone{bottom:9%;right:10%;width:22%;border-width:4px;border-radius:14px}.odc-ux{aspect-ratio:.83}.odc-tablet{top:18%;width:80%;border-width:6px}.odc-sitemap{padding:.6rem;width:46%}.odc-seo--one{height:25%;width:43%}.odc-seo--two{height:26%;width:42%}.odc-figma{height:55%;width:72%}.odc-phone{margin-left:9%;width:22%}.odc-phone+.odc-phone{margin-left:6%}.odc-design{aspect-ratio:.84}.odc-design__brief{padding:1rem;width:49%}.odc-archetype{padding:.8rem;width:36%}.odc-archetype h3{font-size:16px}.odc-archetype p{font-size:8px}.odc-archetype--one{right:17%}.odc-archetype--two{left:21%}.odc-archetype--three{right:-1%}.odc-values{display:none}.odc-motion{aspect-ratio:.88}.odc-motion__portrait{width:50%!important}.odc-storyboard--hero{height:40%;top:27%;width:67%}.odc-storyboard--strip{height:21%;left:2%;width:93%}.odc-film-note{width:72%}}
@media(prefers-reduced-motion:reduce){.odc-piece{animation:none!important;opacity:1!important}}

/* 3.0 / Floating phone and Southern Range case-study compositions */
.odc-floating-phone,.odc-video-phone{background:#252829;border:5px solid #252829;border-radius:18px;box-shadow:0 17px 30px #1d27232d;overflow:hidden;z-index:7}
.odc-floating-phone img,.odc-video-phone video{aspect-ratio:392/850;height:100%;object-fit:cover;object-position:top;width:100%}
.odc-floating-phone--left{bottom:6%;left:43%;transform:rotate(-7deg);width:16%;--delay:360ms;--x:-1rem;--r:-7deg}
.odc-floating-phone--right{bottom:5%;right:0;transform:rotate(6deg);width:16%;--delay:440ms;--x:1rem;--r:6deg}
.odc-video-phone--ux{bottom:-2%;height:62%;left:58%;width:20%;--delay:400ms;--y:2rem}
.odc-video-phone video{background:#111;display:block}
.odc-video-phone video::-webkit-media-controls-panel{opacity:.35}

.odc-design{aspect-ratio:1.1;transform:translateX(-7%);width:96%}
.odc-design__topography{bottom:2%;left:2%;opacity:.14;position:absolute;transform:rotate(-8deg);width:68%;z-index:-1}.odc-design__topography img{filter:sepia(.25)}
.odc-strategy-document header,.odc-strategy-document footer{align-items:center;display:flex;font:600 7px/1.2 Arial,sans-serif;justify-content:space-between;letter-spacing:.11em;text-transform:uppercase}
.odc-sr-ipad{background:#222527;border:7px solid #222527;border-radius:20px;box-shadow:0 19px 38px #27302932;left:2%;margin:0;overflow:hidden;padding:0;top:0;width:37%;z-index:3;--delay:70ms;--x:-2rem}
.odc-sr-ipad__camera{background:#151718;border-radius:50%;height:4px;left:50%;position:absolute;top:2px;transform:translateX(-50%);width:4px;z-index:2}
.odc-sr-ipad__screen{aspect-ratio:1338/1738;background:#fff;border-radius:13px;overflow:hidden}
.odc-sr-ipad__screen img{height:100%;object-fit:cover;object-position:top;width:100%}
.odc-logo-process{background:#f7f3ea;border:1px solid #d7d0c1;border-radius:50%;box-shadow:0 12px 25px #27302921;overflow:hidden;right:3%;top:0;width:27%;z-index:5;--delay:170ms;--x:1rem;--y:-1rem}.odc-logo-process img{aspect-ratio:1;object-fit:cover}.odc-logo-process figcaption{background:#f7f3eaeb;bottom:0;font:600 7px Arial;left:0;padding:.45rem 0 .65rem;position:absolute;text-align:center;text-transform:uppercase;width:100%}.odc-logo-process figcaption small{display:block;font-size:5px;letter-spacing:.08em;margin-top:.15rem}
.odc-video-phone--identity{bottom:1%;height:54%;left:2%;width:18%;z-index:6;--delay:300ms;--x:-1rem;--y:1rem}
.odc-strategy-document{background:#fff;border-top:3px solid #b17b42;bottom:0;box-shadow:0 19px 36px #2730292c;color:#20231f;padding:1.15rem 1.25rem .8rem;right:0;width:72%;z-index:4;--delay:250ms;--x:2rem;--y:1rem}.odc-strategy-document header{border-bottom:1px solid #d9d5ca;padding-bottom:.45rem}.odc-strategy-document h3{font:500 23px/1.02 Arial;margin:.8rem 0 .45rem}.odc-strategy-document__intro{font:8px/1.4 Arial;margin:0;max-width:62ch}.odc-strategy-document__grid{align-items:stretch;display:grid;gap:.55rem;grid-template-columns:1fr .72fr 1fr;margin-top:.75rem}.odc-strategy-document__grid section{color:#fff;padding:.7rem}.odc-strategy-document__grid small{font:600 6px Arial;letter-spacing:.09em;text-transform:uppercase}.odc-strategy-document__grid h4{font:600 13px Arial;margin:.45rem 0 .2rem}.odc-strategy-document__grid p{font:7px Arial;margin:0}.odc-strategy-document__grid b{display:block;font:23px Arial;margin:.5rem 0 .2rem}.odc-strategy-document__grid strong{font:600 7px/1.2 Arial}.is-everyperson{background:#ad7540}.is-sage{background:#526d67}.odc-strategy-document__blend{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.odc-strategy-document__blend div{align-items:center;background:conic-gradient(#526d67 0 37%,#ad7540 37%);border-radius:50%;color:#fff;display:flex;height:61px;justify-content:center;width:61px}.odc-strategy-document__blend span{font:600 7px/1.2 Arial;text-transform:uppercase}.odc-strategy-document__blend small{font:6px Arial;margin-top:.35rem}.odc-strategy-document footer{border-top:1px solid #d9d5ca;margin-top:.65rem;padding-top:.45rem}

@media(max-width:560px){.odc-floating-phone--left{bottom:4%;left:35%;width:20%}.odc-floating-phone--right{right:1%;width:20%}.odc-video-phone--ux{height:56%;left:54%;width:24%}.odc-design{aspect-ratio:.84}.odc-sr-ipad{border-width:4px;border-radius:13px;left:1%;top:0;width:43%}.odc-sr-ipad__screen{border-radius:9px}.odc-logo-process{right:0;width:31%}.odc-video-phone--identity{height:46%;width:21%}.odc-strategy-document{padding:.7rem;width:78%}.odc-strategy-document h3{font-size:15px}.odc-strategy-document__intro{font-size:6px}.odc-strategy-document__grid{gap:.3rem}.odc-strategy-document__grid section{padding:.4rem}.odc-strategy-document__grid h4{font-size:9px}.odc-strategy-document__blend div{height:42px;width:42px}}

/* 3.1 / Balanced phones and original Reflectair identity work */
.odc-video-phone--ux{left:61.5%}
.odc-reflectair{right:1%;top:32%;width:29%;margin:0;background:#fff;padding:.65rem .8rem;box-shadow:0 12px 25px #27302920;z-index:5;--delay:220ms;--x:1rem;--y:.5rem}
.odc-reflectair figcaption{font:600 7px/1.2 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#526d67;margin-bottom:.5rem}
.odc-reflectair img{width:100%;height:auto;margin:.35rem 0 0}
@media(max-width:560px){.odc-video-phone--ux{left:55%}.odc-reflectair{top:27%;right:-1%;width:27%;padding:.4rem;}.odc-reflectair figcaption{font-size:5px}}
/* Keep assembled panels present while crossing the midpoint; only reveal once. */
.has-discipline-motion .ojch-discipline-panel.odc-has-arrived:not(.is-active) .odc-piece{opacity:1;animation:none}
.has-discipline-motion .ojch-discipline-panel.odc-has-arrived.is-active .odc-piece{animation:none;opacity:1}