:root{--paper:#f5f3ee;--ink:#202d2c;--muted:#536361;--teal:#006b65;--line:#d4d9d2;--serif:Georgia,'Times New Roman',serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:6px}img{display:block;max-width:100%;height:auto}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500}h1,h2{line-height:1.07;letter-spacing:-.055em}em{font-family:var(--serif);font-weight:400}main,.site-header,.site-footer{max-width:1440px;margin:auto}.site-header{padding:32px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:25px;letter-spacing:-1.2px;font-weight:700;text-decoration:none;white-space:nowrap}.brand-dot{color:var(--teal)}nav{display:flex;gap:38px;align-items:center;font-size:14px}nav a{text-decoration:none}.nav-contact{border-bottom:1px solid var(--ink);padding-bottom:4px}nav a:hover,.text-link:hover{color:var(--teal)}.hero{padding:65px 5.5% 0}.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:650;display:block}.tiny-cross{font-size:23px;color:var(--teal);vertical-align:middle;margin-right:8px}.hero h1{font-size:clamp(78px,9.5vw,140px);margin:32px 0 35px;max-width:1100px}.hero h1 em{color:var(--teal)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:54px}.hero-bottom p{font-size:20px;max-width:510px;line-height:1.55;margin:0;color:var(--muted)}.text-link{display:inline-flex;justify-content:space-between;align-items:center;gap:35px;padding-bottom:7px;border-bottom:1px solid currentColor;font-size:14px;font-weight:550;text-decoration:none;white-space:nowrap}.text-link span{font-size:22px}.discipline-line{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;text-transform:uppercase;font-size:11px;letter-spacing:.12em}.work-section{padding:88px 5.5% 80px}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}.section-top h2{font-size:clamp(32px,3.3vw,47px);margin:18px 0 0;line-height:1.12;letter-spacing:-.04em}.filters{display:flex;gap:6px;flex-shrink:0}.filters button{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:24px;padding:8px 16px;font-size:12px;white-space:nowrap}.filters button[aria-pressed=true]{background:var(--ink);color:white}.filters button:hover{border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px 32px}.project-link{text-decoration:none;display:block}.project-image{aspect-ratio:1.35;overflow:hidden;background:#e3e7e1}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.project-link:hover .project-image img{transform:scale(1.025)}.card-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);text-transform:uppercase;font-size:9px;letter-spacing:.1em;margin:18px 0 10px}.project-card h3{font-size:23px;line-height:1.25;letter-spacing:-.035em;margin:0 0 10px;display:flex;justify-content:space-between;gap:15px}.project-card h3 span{font-size:24px;font-weight:400}.project-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0;max-width:500px}.learning-cover{aspect-ratio:1.35;padding:7%;color:#f5f3ee;background:#173e39;position:relative;overflow:hidden;display:flex;flex-direction:column}.cover-label,.cover-bottom{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase;letter-spacing:.1em;font-size:8px}.cover-label{padding-bottom:12px;border-bottom:1px solid #ffffff35;color:#dae3d7}.cover-title{font-size:clamp(26px,3.1vw,44px);letter-spacing:-.04em;line-height:1.05;margin-top:22px}.cover-title em{color:#d6ddb8}.conversation{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:10px;line-height:1.5;color:#e8e9dd}.avatar{background:#d5dbc6;color:#173e39;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:13px;flex-shrink:0}.response-preview{background:#f5f3ee;color:#173e39;padding:13px 17px;margin:17px 0}.response-preview>span{font-size:7px;letter-spacing:.14em}.response-preview p{font-size:13px;line-height:1.35;margin:4px 0 0;color:inherit}.response-preview b{float:right;font-size:22px}.cover-bottom{margin-top:auto;font-size:7px;color:#c3d3c4}.about-section{border-top:1px solid var(--line);padding:90px 5.5%;display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;align-items:center}.portrait img{width:100%;aspect-ratio:1;object-fit:cover}.portrait>span{display:block;font:italic 17px var(--serif);margin-top:14px;color:var(--muted)}.about-copy h2{font-size:clamp(34px,4vw,55px);margin:24px 0;line-height:1.13;letter-spacing:-.04em}.about-copy h2 em{color:var(--teal)}.about-copy p{font-size:16px;color:var(--muted);max-width:550px}.about-copy .text-link{margin-top:12px}.approach-section{border-top:1px solid var(--line);padding:50px 5.5% 80px}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:40px}.approach-grid>div>span{font:italic 25px var(--serif);color:var(--teal)}.approach-grid h3{font-size:22px;letter-spacing:-.03em;margin:16px 0 12px}.approach-grid p{font-size:14px;color:var(--muted);margin:0}.contact-section{margin:0 5.5% 60px;padding:65px 7%;background:#e4e9df}.contact-section h2{font-size:clamp(48px,6vw,82px);margin:28px 0 30px}.contact-section h2 em{color:var(--teal)}.contact-section>a{font-size:clamp(15px,2vw,25px);display:inline-block;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:7px}.contact-section>a span{margin-left:25px}.contact-section p{font-size:12px;color:var(--muted);margin:20px 0 0}.site-footer{padding:24px 5.5% 38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:var(--muted)}.site-footer .wordmark{font-size:18px;color:var(--ink)}.site-footer>a:last-child{text-decoration:none}.case-header{padding:50px 12% 55px}.back-link{display:inline-block;font-size:12px;text-decoration:none;margin-bottom:45px}.case-header h1{font-size:clamp(44px,6.5vw,90px);margin:22px 0 26px;max-width:1000px;overflow-wrap:break-word}.case-deck{font:italic clamp(24px,3vw,38px)/1.25 var(--serif);color:var(--teal);max-width:800px;margin-bottom:18px}.case-summary{font-size:17px;color:var(--muted);max-width:680px}.case-body{padding:0 5.5%}.case-text{max-width:740px;margin:55px auto;line-height:1.8;font-size:17px}.case-text div{margin-bottom:18px}.case-text h2{font-size:30px;letter-spacing:-.025em;line-height:1.25;margin:45px 0 20px}.case-image{margin:24px 0;background:#eceee8}.case-image img{width:100%;height:auto}.media-block{max-width:1000px;margin:35px auto}.embed-placeholder{min-height:260px;background:#e4e9df;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;gap:15px}.embed-placeholder p{font:28px var(--serif);margin:0}.embed-placeholder>span{font-size:12px;color:var(--muted)}.button{display:inline-block;background:var(--teal);color:white;padding:13px 21px;border:1px solid var(--teal);font-size:14px;text-decoration:none}.button:hover{background:#164b44}.media-block iframe{width:100%;height:clamp(320px,55vw,700px);border:1px solid var(--line);background:white}.media-block figcaption{font-size:12px;margin-top:10px;text-align:right}.next-project{padding:70px 12%;margin-top:70px;border-top:1px solid var(--line)}.next-project>a:not(.back-link){display:flex;justify-content:space-between;gap:20px;font-size:clamp(25px,4vw,50px);line-height:1.2;letter-spacing:-.04em;text-decoration:none;margin:24px 0}.next-project .back-link{margin:25px 0 0}.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:25px 0;border-block:1px solid var(--line);margin-top:35px}.case-facts dt{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.case-facts dd{font-size:13px;margin:6px 0 0}.id-visual{max-width:850px;margin:0 auto 55px}.id-visual .learning-cover{aspect-ratio:1.8}.id-visual .cover-title{font-size:52px}.id-visual .conversation{font-size:14px}.id-visual .response-preview p{font-size:17px}.id-visual .cover-label,.id-visual .cover-bottom{font-size:10px}.case-text li{margin:10px 0}.case-text .button{margin:12px 0}.evidence-note{border-left:3px solid var(--teal);padding:15px 22px;background:#e4e9df}.skip{position:absolute;top:-100px;left:20px;background:white;padding:15px;z-index:99}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1440px){.hero h1{font-size:140px}}@media(max-width:950px){.section-top{align-items:flex-start;flex-direction:column}.hero{padding-top:45px}.cover-title{margin-top:15px}.conversation{margin-top:13px}.response-preview{margin:12px 0;padding:10px}.learning-cover{padding:6%}.about-section{gap:6%}.case-facts{grid-template-columns:1fr 1fr}.discipline-line{font-size:9px}}@media(max-width:650px){.site-header{padding:22px 6%;gap:15px}.wordmark{font-size:22px}nav{gap:18px;font-size:12px}.nav-contact{display:none}.hero{padding:38px 6% 0}.eyebrow{font-size:9px;letter-spacing:.12em}.hero h1{font-size:clamp(60px,13vw,82px);letter-spacing:-.06em;margin:27px 0}.hero-bottom{display:block;margin-bottom:35px}.hero-bottom p{font-size:17px;max-width:440px;margin-bottom:25px}.text-link{font-size:13px}.discipline-line{display:grid;grid-template-columns:1fr;font-size:9px;gap:8px;padding:15px 0}.work-section{padding:55px 6%}.section-top{gap:24px;margin-bottom:27px}.section-top h2{font-size:32px}.project-grid{grid-template-columns:1fr;gap:35px}.card-meta{font-size:8px}.project-card h3{font-size:22px}.project-card p{font-size:13px}.learning-cover{padding:7%}.cover-title{font-size:clamp(30px,8vw,48px);margin-top:20px}.conversation{font-size:11px;margin-top:18px}.response-preview{margin:16px 0;padding:14px}.response-preview p{font-size:14px}.cover-label,.cover-bottom{font-size:7px}.about-section{grid-template-columns:1fr;padding:55px 6%;gap:35px}.portrait{max-width:320px}.about-copy h2{font-size:37px}.about-copy p{font-size:15px}.approach-section{padding:40px 6% 50px}.approach-grid{grid-template-columns:1fr;gap:28px;margin-top:30px}.approach-grid>div{border-top:1px solid var(--line);padding-top:18px}.approach-grid h3{margin:8px 0}.contact-section{margin:0 6% 40px;padding:38px 8%}.contact-section h2{font-size:46px}.contact-section>a{font-size:14px}.contact-section>a span{margin-left:8px}.contact-section p{font-size:11px}.site-footer{flex-wrap:wrap;padding:24px 6%;font-size:10px}.site-footer>span{order:3;width:100%}.case-header{padding:32px 6%}.case-header h1{font-size:44px;letter-spacing:-.045em}.case-deck{font-size:25px}.case-summary{font-size:16px}.case-body{padding:0 6%}.case-text{font-size:16px;line-height:1.7;margin:35px auto}.case-text h2{font-size:27px;margin-top:35px}.case-image{margin:16px 0}.case-facts{gap:20px 12px}.back-link{margin-bottom:30px}.next-project{padding:40px 6%;margin-top:40px}.id-visual .learning-cover{aspect-ratio:1.2}.id-visual .cover-title{font-size:34px}.id-visual .conversation{font-size:10px}.id-visual .response-preview p{font-size:13px}.id-visual .cover-label,.id-visual .cover-bottom{font-size:7px}.media-block{margin:24px 0}.embed-placeholder{padding:24px 16px}.filters button{padding:8px 15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}@media print{.site-header,.site-footer,.filters,.next-project{display:none}.case-image{break-inside:avoid}body{background:white;color:black}.hero h1{font-size:70px}.project-grid{display:block}.project-card{break-inside:avoid;margin-bottom:30px}}
/* Case-study editorial layer */
.case-facts-two{grid-template-columns:1fr 1fr}.case-facts-two dd{font-size:14px;line-height:1.5}.decision-section{margin:0 5.5% 55px;padding:28px 3% 35px;background:#e8ece3}.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;margin-top:25px}.decision-grid>div>span{font:italic 22px var(--serif);color:var(--teal)}.decision-grid h2{font-size:22px;letter-spacing:-.035em;line-height:1.2;margin:12px 0}.decision-grid p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}.case-text p{margin-bottom:18px}.case-text>p:last-child{margin-bottom:0}@media(max-width:650px){.case-facts-two{grid-template-columns:1fr}.decision-section{margin:0 6% 35px;padding:26px 7%}.decision-grid{grid-template-columns:1fr;gap:24px}.decision-grid h2{font-size:22px;margin:8px 0}.decision-grid p{font-size:14px}}
/* Course production portfolio entry */
.course-cover{aspect-ratio:1.35;background:#dde6db;color:#173e39;padding:7%;display:flex;flex-direction:column;overflow:hidden}.course-cover .cover-label{border-color:#173e3940;color:#173e39}.course-cover .cover-title{font-size:clamp(28px,3.1vw,44px);line-height:1.1;margin-top:28px}.course-cover .cover-title em{color:var(--teal)}.course-cover .cover-bottom{color:#33554a}.course-path{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #173e3940;border-bottom:1px solid #173e3940;padding:20px 0;margin:28px 0;font-size:10px;line-height:1.8}.course-path b{font-size:15px;font-weight:500}.course-path i{font-style:normal;font-size:18px;color:var(--teal)}.course-visual{max-width:1000px;margin:0 auto 55px}.course-visual .course-cover{aspect-ratio:2.2}.course-visual .cover-title{font-size:52px}.course-visual .course-path{margin:25px 0}.course-visual .course-path b{font-size:21px}.course-visual .cover-label,.course-visual .cover-bottom{font-size:9px}.course-example{margin:60px 0;padding:42px;background:#e8ece3}.course-example>h2{font-size:38px;letter-spacing:-.04em;margin:18px 0;line-height:1.2}.example-intro{font-size:16px;max-width:700px;color:var(--muted)}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.example-step{background:var(--paper);padding:25px}.example-step h3{font-size:23px;letter-spacing:-.025em;line-height:1.2;margin:18px 0}.example-step p{font-size:14px;line-height:1.7;color:var(--muted)}.sample-brief{border-top:1px solid var(--line);padding:18px 0 0;font-size:13px}.sample-brief strong,.sample-brief span{display:block}.sample-brief strong{margin-bottom:10px}.sample-brief span{color:var(--muted);line-height:1.6}.sample-poster{background:#173e39;color:var(--paper);padding:24px 18px;margin:20px 0;display:flex;flex-direction:column;min-height:240px}.sample-poster>span:first-child{font-size:8px;letter-spacing:.13em}.sample-poster>strong{font:38px/1.05 var(--serif);letter-spacing:-.04em;margin:20px 0;color:#e7dfbe}.sample-poster>b{font-size:14px;font-weight:500;margin-top:auto}.sample-poster>span:last-child{font-size:9px;margin-top:7px}.example-caption{font-size:12px;color:var(--muted);margin:25px 0 0}@media(max-width:950px){.course-path{margin:20px 0;padding:14px 0}.course-path b{font-size:13px}.course-cover .cover-title{margin-top:18px}.course-example{padding:28px}.example-grid{grid-template-columns:1fr}.example-step{display:block}.sample-poster{max-width:300px}.course-visual .course-cover{aspect-ratio:1.8}.course-visual .cover-title{font-size:43px}}@media(max-width:650px){.course-cover{padding:7%}.course-cover .cover-title{font-size:clamp(29px,8vw,43px);margin-top:20px}.course-path{margin:23px 0;padding:17px 0}.course-path b{font-size:14px}.course-visual .course-cover{aspect-ratio:1.25}.course-visual .cover-title{font-size:34px}.course-visual .course-path b{font-size:15px}.course-visual .cover-label,.course-visual .cover-bottom{font-size:7px}.course-example{margin:35px 0;padding:25px 20px}.course-example>h2{font-size:31px}.example-intro{font-size:15px}.example-step{padding:22px}.course-path i{font-size:15px}}
.process-board{border-block:1px solid var(--line);max-width:1000px;margin:25px auto 40px;padding:20px 0}.process-board summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:16px;font-weight:550;list-style:none}.process-board summary::-webkit-details-marker{display:none}.process-board summary:focus-visible{outline:3px solid var(--teal);outline-offset:6px}.process-board[open] summary span{transform:rotate(45deg)}.process-board>p{font-size:13px;color:var(--muted);margin:15px 0 0}.process-board .case-image{margin:24px 0 0}
/* Shared thumbnail frame: artwork cannot increase its height through intrinsic content. */
.project-thumbnail{position:relative;width:100%;aspect-ratio:1.35;overflow:hidden;container-type:inline-size}
.project-thumbnail>.learning-cover,.project-thumbnail>.course-cover{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0;padding:7cqw}
.project-thumbnail>.learning-cover>*,.project-thumbnail>.course-cover>*{flex-shrink:0}
.project-thumbnail .cover-label{font-size:1.6cqw;letter-spacing:.1em;padding-bottom:2cqw;gap:2cqw}
.project-thumbnail .cover-title,.project-thumbnail .course-cover .cover-title{font-size:7cqw;line-height:1.08;margin-top:4cqw}
.project-thumbnail .cover-bottom{font-size:1.4cqw;gap:2cqw;margin-top:auto}
.project-thumbnail .course-path{margin:4cqw 0;padding:3cqw 0;font-size:2cqw;line-height:1.5;gap:1.5cqw}
.project-thumbnail .course-path b{font-size:3cqw}.project-thumbnail .course-path i{font-size:3.5cqw}
.project-thumbnail .conversation{font-size:2cqw;line-height:1.5;gap:2cqw;margin-top:3cqw}
.project-thumbnail .avatar{width:5.5cqw;height:5.5cqw;font-size:2.5cqw}
.project-thumbnail .response-preview{padding:2.5cqw 3cqw;margin:3cqw 0}
.project-thumbnail .response-preview>span{font-size:1.4cqw}
.project-thumbnail .response-preview p{font-size:2.6cqw;line-height:1.35;margin:1cqw 0 0}
.project-thumbnail .response-preview b{font-size:4cqw}
.project-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Keep readable space inside every inset information panel, including narrow windows. */
:root{--page-gutter:clamp(20px,5.5vw,80px);--panel-inset:clamp(24px,3vw,44px)}
.decision-section{margin:0 var(--page-gutter) 55px;padding:32px var(--panel-inset) 36px}
.course-example{padding:40px var(--panel-inset)}
.evidence-note{padding:20px 24px}
.project-intro{max-width:760px;line-height:1.7}
/* A concrete illustration of instructional authoring: goal, comparison, task, feedback. */
.example-goal{border-left:3px solid var(--teal);padding:18px 24px;background:var(--paper);margin:28px 0 35px}
.example-goal p{font-size:19px;line-height:1.5;max-width:850px;margin:10px 0 0}
.example-comparison{display:grid;grid-template-columns:.85fr 1fr 1fr;gap:24px;align-items:stretch}
.comparison-context h3,.example-teaching h3{font-size:23px;letter-spacing:-.03em;line-height:1.2;margin:16px 0}
.comparison-context p,.example-teaching p{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:0}
.example-comparison figure{margin:0;display:flex;flex-direction:column;min-width:0}
.example-comparison figcaption{font-size:12px;margin-bottom:10px;font-weight:600}
.notice{background:var(--paper);color:var(--ink);padding:24px;min-height:300px;flex:1;display:flex;flex-direction:column;gap:18px;border:1px solid #ced8cc}
.notice-a{font-size:14px;line-height:1.5;justify-content:center}
.notice-b>strong{font:32px/1.1 var(--serif);letter-spacing:-.035em;color:var(--teal);margin-bottom:4px}
.notice-b>div{display:flex;flex-direction:column;gap:5px;font-size:15px;line-height:1.4}
.notice-b>span{font-size:12px;line-height:1.5}.notice-b>span:last-child{margin-top:auto}
.example-teaching{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid #c5d0c1;padding-top:30px;margin-top:35px}
@media(max-width:950px){.example-comparison{grid-template-columns:1fr 1fr;gap:20px}.comparison-context{grid-column:1/-1}.comparison-context h3 br{display:none}.comparison-context h3{margin:12px 0}.notice{padding:20px}.notice-b>strong{font-size:30px}}
@media(max-width:650px){.decision-section{margin-bottom:35px;padding-block:26px}.course-example{padding-block:28px}.example-goal{padding:16px 20px}.example-goal p{font-size:17px}.example-comparison,.example-teaching{grid-template-columns:1fr}.comparison-context{grid-column:auto}.notice{min-height:270px}.notice-b>strong{font-size:34px}.example-teaching{gap:28px;margin-top:28px;padding-top:25px}.comparison-context p,.example-teaching p{font-size:14px}}
.project-thumbnail .response-preview{font-size:1.4cqw;line-height:1.4}
/* Depth: artwork, title plane, and foreground content. */
.site-header{position:relative;z-index:5}
.hero{position:relative;isolation:isolate;overflow:clip;padding-top:75px}
.hero-title-plane,.case-title-plane{position:relative;z-index:1;transform:translate3d(0,var(--depth-y,0px),0)}
.hero-art{position:absolute;right:-6%;top:-20px;width:min(58%,790px);height:calc(100% + 40px);z-index:0;pointer-events:none;transform:translate3d(0,var(--depth-y,0px),0);mask-image:linear-gradient(90deg,transparent 0%,#000 24%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%)}
.hero-art svg{display:block;width:100%;height:100%;object-fit:contain}
.hero h1{max-width:1100px}
.hero-bottom p{position:relative}
.hero .discipline-line{position:relative;z-index:2;background:var(--paper)}
.home-foreground,.case-foreground{position:relative;z-index:3;background:var(--paper);display:flow-root;box-shadow:0 -20px 45px -38px #202d2c66}
.case-header{position:relative;z-index:0;isolation:isolate;overflow:clip}
.depth-enabled [data-parallax]{will-change:transform}
@media(max-width:1100px){.hero-art{width:70%;right:-18%;opacity:.8}}
@media(max-width:767px){.hero{padding-top:45px}.hero-art{width:110%;right:-39%;top:-25px;opacity:.28}.hero-title-plane,.case-title-plane,.hero-art{transform:none}.hero h1{position:relative}}
@media(prefers-reduced-motion:reduce){.hero-title-plane,.case-title-plane,.hero-art{transform:none!important;will-change:auto!important}}
@media print{.hero-art{display:none}.hero-title-plane,.case-title-plane{transform:none!important}.home-foreground,.case-foreground{box-shadow:none}}
.home-foreground,.case-foreground{box-shadow:0 -14px 35px -30px #202d2c33}
/* Full-width material backdrops and a persistent navigation surface. */
:root{--sticky-header-height:88px;--title-gutter:max(6%,calc((100% - 1280px)/2))}
html{scroll-padding-top:calc(var(--sticky-header-height) + 24px)}
main{max-width:none}
.site-header{position:sticky;top:0;z-index:100;max-width:none;height:var(--sticky-header-height);padding:0 var(--title-gutter);background:#102f2c;color:#f5f3ee;border-bottom:1px solid #ffffff24;box-shadow:0 5px 18px #061a1920}
.site-header .brand-dot{color:#bcd6c2}.site-header .nav-contact{border-color:#c1d8c9}.site-header nav a:hover{color:#c1d8c9}
.hero,.case-header{max-width:none;margin:0;padding-inline:var(--title-gutter);color:#f5f3ee;background:#123d39}
.hero{padding-top:85px;padding-bottom:0}
.case-header{padding-top:55px;padding-bottom:clamp(140px,18vh,200px)}
.title-backdrop,.hero-art.title-backdrop{position:absolute;z-index:0;inset:-85% 0 -15%;width:100%;height:auto;opacity:1;pointer-events:none;mask-image:none;-webkit-mask-image:none;background-image:linear-gradient(90deg,#09272399,#09272355),url('assets/hero-texture-v2.jpg');background-size:cover;background-position:center;transform:translate3d(0,var(--depth-y,0px),0)}
.hero h1,.case-header h1{color:#f5f3ee;text-shadow:0 2px 16px #041d1a22}
.hero h1 em,.case-header h1 em{color:#c5ddbf}
.hero .tiny-cross{color:#c5ddbf}
.hero-bottom p,.case-header .case-summary{color:#e1eae2}
.hero .text-link{color:#f5f3ee}.hero .text-link:hover{color:#c5ddbf}
.hero .discipline-line{background:#102f2caa;color:#dce8de;border-color:#ffffff30;padding-inline:16px;margin-inline:-16px;backdrop-filter:blur(6px)}
.case-header .case-deck{color:#c5ddbf}.case-header .case-facts{border-color:#ffffff33}.case-header .case-facts dt{color:#bfd1c5}.case-header .case-facts dd{color:#f5f3ee}
.case-header .button{background:#d2e1c8;color:#123d39;border-color:#d2e1c8}.case-header .button:hover{background:#e2ebdb}
.home-foreground,.case-foreground{box-shadow:0 -14px 42px #031e1a22}
.work-section,.about-section,.approach-section,.case-body,.next-project{max-width:1440px;margin-inline:auto}
.contact-section{max-width:1280px;width:89%;margin-inline:auto}
.decision-section{max-width:1280px;margin-inline:max(var(--page-gutter),calc((100% - 1280px)/2))}
@media(max-width:767px){:root{--sticky-header-height:72px;--title-gutter:6%}.hero{padding-top:50px}.case-header{padding-top:32px;padding-bottom:135px}.hero-title-plane,.case-title-plane,.hero-art.title-backdrop{transform:translate3d(0,var(--depth-y,0px),0)}.title-backdrop,.hero-art.title-backdrop{background-position:60% center}.hero .discipline-line{padding-inline:12px;margin-inline:-12px}}
@media(prefers-reduced-motion:reduce){.hero-title-plane,.case-title-plane,.title-backdrop,.hero-art.title-backdrop{transform:none!important}}
@media print{.title-backdrop,.hero-art.title-backdrop{display:none}.hero,.case-header{color:var(--ink);background:white;padding-bottom:40px}.hero h1,.hero h1 em,.hero-bottom p,.case-header h1,.case-header h1 em,.case-header .case-deck,.case-header .case-summary,.case-header .case-facts dd{color:var(--ink);text-shadow:none}.home-foreground,.case-foreground{box-shadow:none}}
.skip{z-index:200}
.hero .discipline-line{background:#102f2c;backdrop-filter:none}
/* Combined campaign and curated production collection. */
.studies-cover{background:#e5e7df;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:46% 54%;gap:3px}
.studies-cover>div{min-width:0;min-height:0;overflow:hidden;background:#f0eee8}
.studies-cover-lead{grid-column:1/-1;padding:5cqw 3cqw}
.studies-cover img{width:100%;height:100%;object-fit:cover;display:block}.studies-cover-lead img{object-fit:contain}
.studies-cover-mark img{object-position:center 48%}.studies-cover-posters img{object-position:center}
.combined-case{padding-top:48px}
.campaign-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;max-width:1100px;margin:0 auto 50px;align-items:center}
.campaign-intro-grid figure{margin:0}.campaign-intro-grid img{width:100%;height:auto;max-height:720px;object-fit:contain}
.campaign-intro-grid figcaption,.combined-case .case-image figcaption,.study-image figcaption{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}
.campaign-copy h2{font-size:34px;letter-spacing:-.035em;line-height:1.16;margin:20px 0}.campaign-copy h2:not(:first-of-type){margin-top:36px}
.campaign-copy p{font-size:16px;line-height:1.8;color:var(--muted)}
.sonic-section{margin:65px 0 45px;background:#e8ece3;padding:38px var(--panel-inset)}
.sonic-section>h2{font-size:38px;line-height:1.16;letter-spacing:-.04em;margin:18px 0}.sonic-section>p{max-width:780px;font-size:16px;color:var(--muted)}
.audio-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.audio-stages figure{margin:0;background:var(--paper);padding:24px;display:flex;flex-direction:column;min-width:0}
.audio-stages figcaption>span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.audio-stages h3{font-size:22px;letter-spacing:-.03em;line-height:1.2;margin:14px 0}.audio-stages p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px}
.audio-stages audio{display:block;width:100%;min-width:0;margin-top:auto;height:54px}
.collection-jump{display:flex;align-items:center;justify-content:flex-start;gap:16px 32px;flex-wrap:wrap;padding:30px 0;border-bottom:1px solid var(--line);font-size:13px}
.collection-jump .eyebrow{width:100%}.collection-jump a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px}.collection-jump a:hover{border-color:var(--teal);color:var(--teal)}
.study-section{padding:60px 0 65px;border-bottom:1px solid var(--line);scroll-margin-top:10px}
.study-heading{max-width:820px;margin:0 auto 35px}.study-heading h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.045em;line-height:1.1;margin:20px 0 24px}.study-heading p{font-size:17px;line-height:1.8;color:var(--muted);margin-bottom:18px}
.study-image{max-width:1100px;margin:25px auto}.study-image img{width:100%;height:auto}
.collection-body .process-board{max-width:1100px}.presentation-disclosure video{width:100%;height:auto;max-height:650px;display:block;margin-top:24px;background:#123d39}
.presentation-disclosure>p{max-width:760px}.collection-body .case-image figcaption{padding-bottom:15px;font-size:12px;color:var(--muted)}
.marks-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1100px;margin:0 auto}.marks-grid figure{margin:0;min-width:0}.marks-grid img{width:100%;height:auto;aspect-ratio:1.25;object-fit:contain;background:#e7e8e2}
.marks-grid h3{font-size:24px;line-height:1.2;letter-spacing:-.03em;margin:22px 0 12px}.marks-grid p{font-size:15px;line-height:1.7;color:var(--muted)}
@media(max-width:950px){.audio-stages{grid-template-columns:1fr}.audio-stages figure{padding:24px}.audio-stages p{max-width:650px}.audio-stages audio{max-width:460px}.campaign-intro-grid{gap:5%}.campaign-copy h2{font-size:29px}.campaign-copy p{font-size:15px}}
@media(max-width:650px){.combined-case{padding-top:32px}.campaign-intro-grid{grid-template-columns:1fr;gap:32px;margin-bottom:30px}.campaign-intro-grid img{max-height:600px}.campaign-copy h2{font-size:29px}.sonic-section{margin:38px 0;padding:28px 24px}.sonic-section>h2{font-size:30px}.sonic-section>p{font-size:15px}.audio-stages{gap:18px}.audio-stages figure{padding:20px}.audio-stages h3{font-size:22px}.study-section{padding:40px 0}.study-heading h2{font-size:35px}.study-heading p{font-size:15px}.marks-grid{grid-template-columns:1fr;gap:25px}.marks-grid h3{font-size:23px}.collection-jump{gap:12px 20px;padding:25px 0}.collection-jump a{font-size:12px}.process-board summary{font-size:14px}}
.studies-cover{grid-template-rows:minmax(0,46fr) minmax(0,54fr)}
.studies-cover{grid-template-rows:minmax(0,62fr) minmax(0,38fr)}
.studies-cover-lead{padding:0}.studies-cover-lead img{object-fit:cover;object-position:center}
.secondary-study-section{padding-block:35px}.secondary-study{max-width:1100px;margin:auto}
.secondary-study>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0 5px}
.secondary-study>summary::-webkit-details-marker{display:none}.secondary-study>summary h2{font-size:32px;line-height:1.2;letter-spacing:-.035em;margin:0}
.secondary-study>summary>span{font-size:12px;color:var(--muted);display:flex;gap:15px;align-items:center}.secondary-study>summary b{font-size:22px;font-weight:400}.secondary-study[open]>summary b{transform:rotate(45deg)}
.secondary-study>summary:focus-visible{outline:3px solid var(--teal);outline-offset:5px}.secondary-study>.study-heading{margin:28px 0 30px;max-width:760px}
@media(max-width:650px){.secondary-study>summary h2{font-size:27px}.secondary-study>summary>span{font-size:10px;gap:8px}}
/* Loose-to-normal word spacing, with the final word reserving its layout width. */
.connect-word{position:relative;display:inline-block;white-space:nowrap}
.connect-word.is-connecting{color:transparent}
.connect-letters{position:absolute;left:0;top:0;display:block;width:max-content;color:#c5ddbf;pointer-events:none;font:inherit;letter-spacing:inherit;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.connect-word.is-connecting{color:#c5ddbf}.connect-letters{display:none}}
/* Action-led motion: filtering, disclosures, directional links, ordered stages. */
.filter-ghost h3{font-size:23px;line-height:1.25;letter-spacing:-.035em;margin:0 0 10px;display:flex;justify-content:space-between;gap:15px}
.filter-ghost p{font-size:14px;color:var(--muted);line-height:1.6;margin:0;max-width:500px}
.disclosure-body{display:flow-root}.process-board>.disclosure-body>p{font-size:13px;color:var(--muted);margin:15px 0 0}
.secondary-study>.disclosure-body>.study-heading{margin:28px 0 30px;max-width:760px}
.motion-disclosure .disclosure-icon{display:inline-block;transition:transform 200ms ease}
.motion-disclosure.is-expanded>summary .disclosure-icon{transform:rotate(45deg)}
.motion-disclosure:not(.is-expanded)>summary .disclosure-icon{transform:rotate(0deg)}
.link-arrow{display:inline-block;transition:transform 150ms ease;--arrow-x:3px;--arrow-y:-3px}
.link-arrow[data-direction=right]{--arrow-y:0px}.link-arrow[data-direction=left]{--arrow-x:-3px;--arrow-y:0px}
.link-arrow[data-direction=down]{--arrow-x:0px;--arrow-y:3px}.link-arrow[data-direction=up]{--arrow-x:0px;--arrow-y:-3px}
a:focus-visible .link-arrow{transform:translate(var(--arrow-x),var(--arrow-y))}
@media(hover:hover){a:hover .link-arrow{transform:translate(var(--arrow-x),var(--arrow-y))}}
.approach-grid,.audio-stages{position:relative}
.process-connector{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.process-track{fill:none;stroke:#8fac9b;stroke-width:1.2;vector-effect:non-scaling-stroke}
.process-connector circle{fill:var(--paper);stroke:var(--teal);stroke-width:1;vector-effect:non-scaling-stroke}
@media(prefers-reduced-motion:reduce){.link-arrow{transition:none;transform:none!important}.motion-disclosure .disclosure-icon{transition:none}}
@media print{.process-connector{display:none}}
.presentation-disclosure video{aspect-ratio:16/9;object-fit:contain}
/* Closed motion paths: preserve the original image beneath the animated texture. */
.hero-loop{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-loop.is-enabled{display:block}
.hero-texture-layer{position:absolute;inset:-8%;background-image:linear-gradient(90deg,#09272399,#09272355),url('assets/hero-texture-v2.jpg');background-size:cover;background-position:center;animation-play-state:paused;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.texture-primary{animation-name:texture-orbit;animation-duration:36s}
.texture-secondary{opacity:.26;animation-name:texture-counterflow;animation-duration:54s;animation-delay:-18s;mask-image:linear-gradient(180deg,transparent 12%,#000 65%);-webkit-mask-image:linear-gradient(180deg,transparent 12%,#000 65%)}
.hero-loop.is-running .hero-texture-layer{animation-play-state:running;will-change:transform}
@keyframes texture-orbit{
  0%,100%{transform:translate(-2%,-1%) rotate(-.35deg) scale(1.035)}
  25%{transform:translate(1.8%,-2%) rotate(.15deg) scale(1.055)}
  50%{transform:translate(2.4%,1%) rotate(.35deg) scale(1.045)}
  75%{transform:translate(-1.2%,2%) rotate(-.1deg) scale(1.025)}
}
@keyframes texture-counterflow{
  0%,100%{transform:translate(2%,1.5%) rotate(.3deg) scale(1.04)}
  25%{transform:translate(-1.8%,2%) rotate(-.2deg) scale(1.055)}
  50%{transform:translate(-2.5%,-1%) rotate(-.35deg) scale(1.035)}
  75%{transform:translate(1%,-2%) rotate(.1deg) scale(1.025)}
}
.hero-motion-toggle{appearance:none;background:transparent;color:#e2ece4;border:0;border-bottom:1px solid #a8c3b299;padding:3px 0;font:inherit;font-size:10px;line-height:1.4;letter-spacing:.02em;text-transform:none;white-space:nowrap;cursor:pointer}
.hero-motion-toggle:hover{color:white;border-color:white}.hero-motion-toggle:focus-visible{outline:2px solid #d2e1c8;outline-offset:5px}
@media(max-width:650px){.hero-motion-toggle{justify-self:start;margin-top:7px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-loop{display:none!important}.hero-motion-toggle{display:none!important}}
@media print{.hero-loop,.hero-motion-toggle{display:none!important}}
.hero-loop{display:block;visibility:hidden;opacity:0;transition:opacity 1200ms ease}
.hero-loop.is-enabled{visibility:visible;opacity:1}

/* Interactive learning concepts: full-width, framed independently of the narrative. */
.embedded-experience{margin:0 0 60px;scroll-margin-top:115px;width:100%;min-width:0}
.experience-heading{margin-bottom:24px;padding-top:8px}.experience-heading h2{font-size:clamp(30px,4vw,46px);margin:12px 0}.experience-heading p{max-width:700px;margin-bottom:0;color:var(--muted)}
.experience-stage{width:100%;min-width:0;padding:clamp(10px,2vw,24px);background:#1e343b;border:1px solid #14282e;border-radius:18px;box-shadow:0 18px 42px #14282e18}
.experience-chrome{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 2px 18px;color:#e5eeed;font-size:10px;letter-spacing:.1em}.experience-chrome span:first-child{font-weight:750}.experience-chrome span:last-child{letter-spacing:.02em;color:#bbcdd0}
.experience-frame{display:block;width:100%;max-width:100%;height:1200px;border:0;background:white;border-radius:8px}
.embedded-experience:has(iframe:focus-visible){outline:3px solid #9b671d;outline-offset:5px}
.case-study-divider{max-width:850px;margin:0 auto 40px;padding:30px 0 0;border-top:1px solid var(--line)}.case-study-divider p{font-size:18px;margin:12px 0 0;color:var(--muted)}
@media(max-width:700px){.experience-frame{height:1700px}.embedded-experience{margin-bottom:40px;scroll-margin-top:90px}.experience-stage{border-radius:12px}.experience-chrome{font-size:9px;display:block;padding-bottom:12px}.experience-chrome span{display:block}.experience-chrome span:last-child{margin-top:5px}.case-study-divider{margin-bottom:24px}}