:root{font-family:Arial,Helvetica,sans-serif;color:#191b1b;background:#fff;font-synthesis:none;--mint:#d6eee3;--gray:#666c69}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #29765b;outline-offset:6px}header{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:34px 5%}.logo{font-size:25px;font-weight:700;letter-spacing:-2px;text-decoration:none}.logo span{color:#648572}.menu-button{background:none;border:0;display:grid;gap:5px;padding:14px;cursor:pointer}.menu-button span{width:24px;height:2px;background:#222}main{max-width:1320px;margin:auto;padding:0 5%}.intro{text-align:center;max-width:860px;margin:40px auto 62px}.portrait{margin:0 auto 25px;border-radius:50%;width:100px;height:100px;background:#f0f4f1;display:flex;align-items:center;justify-content:center;color:#68726c;font-size:13px;padding:20px;line-height:1.4}h1{font-size:clamp(36px,4.1vw,58px);letter-spacing:-2.5px;line-height:1.1;font-weight:600;margin:22px 0}h1 mark{background:linear-gradient(transparent 56%,var(--mint) 56%,var(--mint) 95%,transparent 95%);color:inherit;padding:0 5px}.intro p{font-size:18px;line-height:1.75;color:var(--gray);max-width:780px;margin:24px auto}.intro p a{text-decoration-color:#a2b6ab}.categories{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px 0 0}.pill{border:1px solid #d8ddda;background:#fff;border-radius:12px;padding:15px 23px;text-decoration:none;font-size:14px;transition:background .2s}.pill:hover{background:var(--mint)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{display:block;text-decoration:none}.tile{position:relative;aspect-ratio:1.06;border-radius:20px;overflow:hidden;background:#f1f3f2}.tile img{width:100%;height:100%;object-fit:cover;transition:opacity .28s,transform .5s}.tile .reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font-size:28px;letter-spacing:-1px;background:var(--mint);opacity:0;transition:opacity .28s}.card:hover .reveal,.card:focus-visible .reveal{opacity:1}.card:hover img{transform:scale(1.03)}.card-label{display:flex;justify-content:space-between;margin:17px 2px;font-size:15px}.card-label small{font-size:13px;color:var(--gray)}footer{max-width:1320px;margin:110px auto 0;padding:45px 5%;border-top:1px solid #e4e7e5;display:flex;justify-content:space-between;gap:35px}footer h2{font-size:25px;letter-spacing:-1px;margin:0 0 14px}footer p{color:var(--gray);line-height:1.7;font-size:15px;margin:0}.contact{display:flex;align-items:flex-start;gap:25px;font-size:14px}.contact a{padding-top:4px}dialog{border:0;border-radius:24px;padding:36px;width:min(520px,90vw);box-shadow:0 20px 100px #0002}dialog::backdrop{background:#14211baa;backdrop-filter:blur(8px)}dialog nav{display:grid;gap:24px;padding:35px 0}dialog a{font-size:24px;letter-spacing:-.8px;text-decoration:none}dialog button{float:right;border:0;background:#f0f3f1;padding:10px 16px;border-radius:20px;cursor:pointer}.eyebrow{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray)}.category-intro{margin:70px auto 65px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 25px}.project-grid .tile{aspect-ratio:1.4}.project-grid .tile img{object-fit:contain}.back{display:inline-block;margin:35px 0 10px;font-size:14px;color:var(--gray)}.project-header{max-width:880px;margin:30px 0 50px}.project-header p{font-size:21px;color:var(--gray);line-height:1.6}.hero-img{width:100%;max-height:670px;object-fit:contain;border-radius:20px;background:#f4f5f4}.section{padding:75px 0;border-bottom:1px solid #e3e7e4}.section-heading{display:flex;gap:25px;align-items:baseline;margin-bottom:32px}.section-heading span{color:#7b8981;font-size:14px}.section h2{font-size:34px;letter-spacing:-1.2px;margin:0}.section h3{font-size:18px;letter-spacing:-.3px;margin:0 0 13px}.section p{font-size:16px;line-height:1.75;color:var(--gray)}.columns{display:grid;grid-template-columns:1fr 1fr;gap:35px}.missing{background:#f6f7f6;border-left:2px solid #b7c8bd;padding:18px 22px;border-radius:0 12px 12px 0}.missing strong{color:#53635b;font-size:12px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:8px}.missing p{margin:0;font-size:14px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}figure{margin:0}figure img{width:100%;height:390px;object-fit:contain;background:#f5f6f5;border-radius:16px}figcaption{font-size:14px;color:var(--gray);line-height:1.6;margin-top:12px}.wide{grid-column:1/-1}.wide img{height:auto;max-height:750px}.project-nav{display:flex;justify-content:space-between;gap:25px;padding:40px 0}.project-nav a{max-width:45%;font-size:18px;text-decoration:none}.project-nav small{display:block;color:var(--gray);font-size:13px;margin-bottom:8px}.skip{position:fixed;top:-60px;left:20px;background:white;padding:15px;z-index:5}.skip:focus{top:10px}@media(hover:none){.tile .reveal{display:none}.card-label{font-weight:600}}@media(max-width:700px){header{padding:22px 6%}.intro{margin:25px auto 40px}.intro p{font-size:16px;line-height:1.7}h1{letter-spacing:-1.5px}.portrait{width:85px;height:85px}.pill{padding:12px 14px;font-size:13px}.categories{gap:8px}.grid,.project-grid,.columns,.gallery{grid-template-columns:1fr}.grid{gap:25px}.tile{aspect-ratio:1.25}.card-label{margin:13px 3px}footer{margin-top:70px;flex-direction:column;padding:35px 6%}.contact{flex-wrap:wrap}.section{padding:48px 0}.section h2{font-size:28px}.project-header p{font-size:18px}.gallery img{height:auto;max-height:600px}.project-header{margin-top:20px}.category-intro{margin:40px auto}.wide{grid-column:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

.split-lead{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;margin-top:25px}.split-lead h1{font-size:clamp(34px,3.6vw,52px)}.split-lead .hero-img{max-height:520px}.split-lead .project-header{margin:20px 0}.skip:not(:focus){clip-path:inset(100%);width:1px;height:1px;overflow:hidden}@media(max-width:700px){.split-lead{grid-template-columns:1fr;gap:25px}}

/* Homepage proportions share one width so copy never exceeds the gallery. */
.home-page{--home-width:min(100%,990px,max(660px,calc((100svh - 450px)*3 + 12px)));--description-size:15px}
.home-page header{padding-top:12px;padding-bottom:12px}
.home-page main{max-width:1200px}
.home-page .intro{width:var(--home-width);max-width:none;margin:16px auto 34px}
.home-page .portrait{width:76px;height:76px;margin-bottom:16px;padding:10px;font-size:12px}
.home-page h1{font-size:clamp(30px,3.1vw,40px);letter-spacing:-1.4px;margin:0 0 18px}
.home-page h1 mark{background:linear-gradient(var(--mint) 0%,var(--mint) 46%,transparent 46%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.home-page .intro p{font-size:var(--description-size);line-height:1.6;width:86%;max-width:800px;margin:0 auto 28px}
.home-page .categories{margin:0;gap:10px}
.home-page .pill{font-size:calc(var(--description-size) - 2pt);line-height:1.3;border:0;border-radius:999px;background:#ededed;padding:11px 22px}
.home-page .pill:hover,.home-page .pill:focus-visible{background:#dedede}
.home-page .grid{width:var(--home-width);max-width:none;margin:auto;gap:6px}
.home-page .tile{aspect-ratio:1;border-radius:0}
.home-page footer{margin-top:85px}
@media(max-width:700px){
 .home-page{--home-width:100%}
 .home-page .intro{margin:18px auto 28px}
 .home-page h1{font-size:32px}
 .home-page .intro p{width:100%}
 .home-page .categories{gap:8px}
 .home-page .pill{padding:11px 18px}
 .home-page .grid{gap:10px}
}
@media(hover:none){.home-page .tile .reveal{display:flex;inset:auto 0 0;padding:12px;font-size:16px;letter-spacing:0;background:#ffffffed;opacity:1}}
/* Match header controls to the homepage gallery edges. */
.home-page header{width:min(calc(min(1200px,100%) - 10vw),990px,max(660px,calc((100svh - 450px)*3 + 12px)));max-width:none;padding-left:0;padding-right:0}
.home-page .menu-button{padding-left:0;padding-right:0}
@media(max-width:700px){.home-page header{width:90%}}

/* Category pages reuse the homepage composition and square, left-filled grid. */
.header-start{display:flex;align-items:center;gap:18px}
.home-back{display:flex;align-items:center;justify-content:center;width:32px;height:44px;color:#191b1b;border-radius:8px}
.home-back:hover{background:#ededed}
.category-page .category-intro{margin-top:42px}
.category-page .pill[aria-current="page"]{background:#dedede;box-shadow:inset 0 0 0 1px #c4c8c5}
.category-page .category-grid .tile img{object-fit:cover}
@media(max-width:700px){.category-page .category-intro{margin-top:24px}}

/* Shared header geometry on Home, categories, and case studies. */
body header,.home-page header{width:min(calc(min(1200px,100%) - 10vw),990px,max(660px,calc((100svh - 450px)*3 + 12px)));max-width:none;height:70px;padding:12px 0;margin:0 auto}
body .menu-button{padding-left:0;padding-right:0}
.category-title-row{position:relative;margin-bottom:18px}
.category-title-row .home-back{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.home-page .category-title-row h1{margin:0;padding:0 44px}
@media(max-width:700px){body header,.home-page header{width:90%}}

/* Minimal footer with balanced logo, email, and LinkedIn. */
footer.site-footer{display:block;max-width:none;margin:85px 0 0;padding:44px 5%;border:0;background:#e7e7e7}
.footer-inner{width:min(100%,990px,max(660px,calc((100svh - 450px)*3 + 12px)));margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.footer-logo{font-size:38px;letter-spacing:-3px;line-height:1;justify-self:start}
.footer-email{font-size:15px;line-height:1.5;text-decoration:none;color:#494d4b;text-align:center;overflow-wrap:anywhere}
.footer-email:hover{text-decoration:underline;color:#191b1b}
.footer-linkedin{justify-self:end;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#494d4b;border-radius:8px}
.footer-linkedin:hover{color:#191b1b;background:#d9dcda}
@media(max-width:700px){footer.site-footer{padding:30px 5%;margin-top:65px}.footer-inner{width:100%;gap:12px;grid-template-columns:auto minmax(0,1fr) auto}.footer-logo{font-size:34px}.footer-email{font-size:13px}}

/* Hover navigation opens as a right-hand panel. */
#site-navigation{position:fixed;inset:0 0 0 auto;margin:0;width:max-content;height:100dvh;max-height:100dvh;max-width:88vw;border-radius:0;padding:18px 14px;z-index:100;background:#f3f4f3;box-shadow:-12px 0 45px #0002;overflow-y:auto}
#site-navigation nav{clear:both;padding-top:30px;gap:24px}
#site-navigation nav a{font-size:17px;line-height:1.4}
#site-navigation nav a:hover{text-decoration:underline;text-underline-offset:6px}

#site-navigation .close-menu{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%}

#site-navigation nav a{letter-spacing:0}
/* Bold, left-aligned typography for all gallery tile labels. */
.tile .reveal{justify-content:flex-start;align-items:flex-end;text-align:left;padding:clamp(20px,2.5vw,32px);font-size:clamp(21px,2.1vw,29px);font-weight:600;line-height:1.25;letter-spacing:-.5px;text-wrap:pretty}
@media(hover:none){.home-page .tile .reveal{justify-content:flex-start;align-items:center;text-align:left;padding:14px 18px;font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.15px}}
/* Place gallery labels at the top-left on hover, focus, and touch. */
.tile .reveal{align-items:flex-start}
@media(hover:none){.home-page .tile .reveal{inset:0 0 auto;align-items:flex-start}}
/* Vertically centred gallery labels with left-aligned text. */
.tile .reveal{align-items:center;text-align:left}
@media(hover:none){.home-page .tile .reveal{inset:50% 0 auto;transform:translateY(-50%);align-items:center;text-align:left}}

/* Physical products share one desktop row with project-specific crops. */
@media(min-width:701px){.physical-page .category-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.physical-page .tile .reveal{font-size:clamp(16px,1.5vw,22px);padding:18px}}
.physical-page .card.project-smart-portafilter .tile img,.physical-page .card.project-breville-drill .tile img{object-position:left center;transform-origin:left center;transform:scale(1.43)}
.physical-page .card.project-carabiner-reacher .tile img{transform:scale(1.08)}
/* Give the five-product gallery more room without moving the header. */
@media(min-width:701px){
 .physical-page .category-grid{width:min(94vw,1380px);max-width:none;position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
}
/* Reframe the render around a complete product view, away from its blank half. */
.physical-page .card.project-smart-portafilter .tile img{width:100%;height:100%;object-fit:cover;object-position:left center;transform-origin:left center;transform:scale(1.43);translate:0 0}
.physical-page .card.project-smart-portafilter .tile img{position:absolute;width:512%;height:320%;max-width:none;left:-124%;top:-220%;object-fit:fill;object-position:center;transform:none;translate:none}
/* Focus the portafilter thumbnail on the green-indicator product view. */
.physical-page .card.project-smart-portafilter .tile img{width:474.074%;height:296.296%;left:-107.407%;top:-59.259%}
.physical-page .card.project-smart-portafilter .tile{background:#c5c5c5}
.physical-page .card.project-smart-portafilter .tile img{width:556.522%;height:347.826%;left:-135.652%;top:-73.913%;clip-path:inset(24.5% 0 51% 0);mask-image:linear-gradient(to bottom,transparent 24.5%,black 25.5%,black 48%,transparent 49%)}

/* Device-focused UI/UX thumbnail crops. */
.category-page .card.project-old-mate-app .tile img{object-position:center;transform:scale(1.35)}
.category-page .card.project-pod-pilates-app .tile img{object-position:center;transform:scale(1.42)}
.category-page .card.project-return-and-earn-revamp .tile img{object-position:center;transform:scale(1.15)}
/* Frame the desk-hook photograph inside its printed-image bounds. */
.category-page .card.project-product-visualisation-campaign-images .tile img{position:absolute;width:213.333%;height:133.333%;max-width:none;left:-5%;top:-16.667%;object-fit:fill;transform:none}
/* Case studies: evidence, decisions, and final work. */
.case-page main{max-width:1240px}.case-page .project-header p{font-size:19px}.case-page .context-note{font-size:14px;line-height:1.7;color:#646e68;max-width:780px}.case-index{display:flex;flex-wrap:wrap;gap:12px 26px;border-bottom:1px solid #e3e7e4;padding:30px 0;font-size:14px}.case-index a{text-decoration:none}.case-index a:hover{text-decoration:underline}.case-page .section{scroll-margin-top:25px}.project-facts{margin:0}.project-facts>div{display:grid;grid-template-columns:70px 1fr;gap:15px;border-bottom:1px solid #e5e9e6;padding:13px 0}.project-facts dt{color:#657069;font-size:14px}.project-facts dd{margin:0;font-size:16px;line-height:1.6}.case-list{padding-left:20px;margin:12px 0 25px;color:#5c645f;line-height:1.8;font-size:16px}.case-list li+li{margin-top:8px}.problem-intro{max-width:860px;margin-bottom:35px}.insights{margin-top:45px}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0;list-style:none}.insight-grid li{padding:24px;background:#f2f6f3;border-radius:14px}.insight-grid span{font-size:13px;color:#5d7c6c}.insight-grid p{margin-bottom:0}.process-sequence{display:grid;gap:60px}.process-step{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.process-step figure img{height:auto;max-height:580px;min-height:220px;object-fit:contain}.process-copy h3{font-size:24px;line-height:1.3;margin:12px 0 18px}.stage-finding{border-left:2px solid #a9cbb9;padding-left:16px}.stage-finding strong{display:block;font-size:13px;color:#345743;margin-bottom:6px}.text-step{display:block;max-width:850px;padding:28px;background:#f6f7f6;border-radius:14px}.text-step .process-copy h3{font-size:23px}.project-video{margin-top:55px}.project-video video{display:block;width:100%;max-height:650px;background:#f2f4f2;border-radius:16px}.project-video figcaption{max-width:850px;margin-top:18px}.project-video figcaption p{font-size:14px;margin:8px 0}.project-video figcaption a{font-size:14px}.case-page #final-product>.case-list{columns:2;column-gap:45px}.case-page #final-product>.case-list li{break-inside:avoid}.case-page .gallery figcaption{font-size:14px}@media(max-width:700px){.process-step,.insight-grid{grid-template-columns:1fr}.process-step{gap:22px}.process-sequence{gap:42px}.case-page #final-product>.case-list{columns:1}.case-index{gap:15px;font-size:13px}.project-facts>div{grid-template-columns:60px 1fr}.case-page .project-header p{font-size:17px}}
/* Case-study information hierarchy and image-led final layouts. */
.overview-columns{align-items:start;gap:48px}
.information-panel{background:#eeefee;border-radius:16px;padding:30px}
.information-panel .project-facts>div{border-color:#d7dcd8}
.information-panel .project-facts>div:last-child{border-bottom:0}
.outcome-arrow{display:flex;align-items:center;margin:20px 0;color:#628573}
.problem-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:28px}
.problem-row .problem-intro{margin:0;max-width:none}
.problem-row.without-users{grid-template-columns:1fr;max-width:850px}
.requirements-panel .case-list{margin-bottom:0;columns:2;column-gap:44px}
.requirements-panel li{break-inside:avoid}
.insight-grid{grid-template-columns:repeat(var(--insight-count),minmax(0,1fr));gap:14px}
.insight-grid li{padding:22px}
.insight-grid p{font-size:15px;line-height:1.65}
.final-wide>p{max-width:850px;margin-bottom:28px}
.final-wide>figure img{width:100%;height:auto;max-height:750px;object-fit:contain}
.final-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center}
.final-split>figure img{height:auto;max-height:580px;object-fit:contain}
.final-features .case-list{columns:1;margin:0}
@media(max-width:700px){.overview-columns,.problem-row,.final-split{grid-template-columns:1fr;gap:26px}.information-panel{padding:24px}.requirements-panel .case-list{columns:1}.insight-grid{grid-template-columns:1fr}.final-features .case-list{margin-top:0}}
/* Category pill and flowing case-study media. */
.case-page .category-back-pill{display:inline-flex;align-items:center;gap:10px;background:#ededed;border-radius:999px;padding:11px 22px;text-decoration:none;color:#191b1b;font-size:calc(15px - 2pt);line-height:1.3}
.case-page .category-back-pill:hover{background:#dedede}
.case-page figure img{display:block;width:min(100%,var(--media-width,100%));height:auto;min-height:0;max-height:none;object-fit:contain;border-radius:0;background:transparent;margin:0 auto}
.case-page .hero-img{display:block;height:auto;max-height:none;border-radius:0;background:transparent}
.case-page .project-video video{border-radius:0;background:transparent}
.case-page .overview-columns{display:block}
.overview-story{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:28px;align-items:start}
.overview-story .outcome-arrow{align-self:center;justify-content:center;margin:0;transform:rotate(-90deg)}
.project-information{width:max-content;max-width:100%;margin-top:30px}
.project-information .project-facts{width:max-content;max-width:100%}
.project-information .project-facts>div{grid-template-columns:70px minmax(0,1fr)}
.project-information .context-note{max-width:65ch}
.case-page .requirements-panel .case-list{columns:1}
@media(max-width:700px){.overview-story{grid-template-columns:1fr;gap:16px}.overview-story .outcome-arrow{justify-self:start;transform:none}.project-information{width:100%;padding:24px}.project-information .project-facts{width:100%}.project-information dd{overflow-wrap:anywhere}}
/* Carabiner Reacher: sketches, three prototypes, and resolved design. */
.reacher-development{display:grid;gap:58px}
.section .reacher-stage-title{display:flex;align-items:baseline;gap:16px;font-size:25px;margin:0 0 28px}
.reacher-stage-title span{font-size:14px;font-weight:400;color:#648572}
.reacher-sketch-row{display:grid;grid-template-columns:1.4fr 1fr;gap:38px;align-items:center}
.reacher-test-results p{margin:0 0 24px}
.reacher-test-results strong{font-weight:600;color:#252b27}
.reacher-prototype-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.case-page .reacher-prototype-row img,.case-page .reacher-prototype-row video{display:block;width:100%;height:auto;max-height:none;min-height:0;background:transparent;border-radius:0}
.reacher-prototype-row figcaption{margin-top:14px;line-height:1.6}
.reacher-final-prototypes,.reacher-final-renders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.reacher-final-prototypes+p{max-width:900px;margin-top:25px}
@media(max-width:700px){.reacher-sketch-row,.reacher-prototype-row,.reacher-final-prototypes,.reacher-final-renders{grid-template-columns:1fr;gap:26px}.reacher-development{gap:42px}}
/* Refined Reacher process and final presentation. */
.reacher-sketch-row{grid-template-columns:1.85fr 1fr;gap:30px}
.reacher-test-results p{border-left:2px solid #a9cbb9;padding-left:18px}
.reacher-test-results strong{display:block;font-size:14px;color:#345743;margin-bottom:8px}
.case-page .reacher-prototype-row video{aspect-ratio:3/4;height:auto;object-fit:cover;object-position:center 85%}
.reacher-final-story p{margin:24px 0 0;max-width:48ch}
.reacher-final-prototypes{gap:36px}
.reacher-final-intro{max-width:820px;margin-bottom:28px}
.reacher-final-renders{gap:12px}
.reacher-final-renders figure{position:relative;overflow:hidden;aspect-ratio:1;background:#e5e5e5}
.case-page .reacher-final-renders figure img{position:absolute;width:170.667%;height:106.667%;max-width:none;left:-33.333%;top:-3.333%;object-fit:fill}
@media(max-width:700px){.reacher-sketch-row{grid-template-columns:1fr}.reacher-final-prototypes{gap:28px}.reacher-final-story p{max-width:none}}
.case-page .reacher-final-renders figure:nth-child(2) img{width:160%;height:100%;left:-12.5%;top:0}
.case-page .project-nav .category-back-pill{max-width:none;margin:0;font-size:calc(15px - 2pt)}
.project-nav .category-back-pill svg{flex-shrink:0}
@media(max-width:500px){.case-page .project-nav{gap:14px;flex-wrap:wrap}.case-page .project-nav .next-project-pill{margin-left:auto}}
.wave-development{display:grid;gap:58px}
.wave-prototype-board{margin-top:26px}
.case-page .wave-prototype-board figure img{width:100%;height:auto;max-width:none;max-height:none}
@media(max-width:700px){.wave-development{gap:42px}}
/* Keep WAVE's sketch compact beside its test result. */
.wave-development .reacher-sketch-row{grid-template-columns:1.2fr 1fr;gap:40px}
.case-page .wave-development .reacher-sketch-row figure img{width:85%;margin:0 auto}
@media(max-width:700px){.wave-development .reacher-sketch-row{grid-template-columns:1fr;gap:24px}}
/* Reacher: split introduction and floating overview information card. */
.reacher-overview-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:50px;align-items:start}
.reacher-overview-copy .outcome-arrow{margin:20px 0}
.reacher-overview-visual{padding-bottom:12px}
.reacher-information{position:relative;width:88%;margin:-42px -12px 0 auto;padding:24px;border:1px solid #dde2de;box-shadow:0 16px 34px #193b241c;z-index:1}
.section .reacher-information h3{font-size:17px}
.reacher-information .project-facts>div{grid-template-columns:50px minmax(0,1fr);gap:12px;padding:10px 0}
.reacher-information .project-facts dt,.reacher-information .project-facts dd{font-size:13px;line-height:1.6}
.reacher-final-renders.single-render{grid-template-columns:1fr}
.reacher-final-renders.single-render figure{aspect-ratio:auto;background:transparent;overflow:visible}
.case-page .reacher-final-renders.single-render figure img{position:static;width:100%;height:auto;left:auto;top:auto;object-fit:contain}
@media(max-width:700px){.reacher-overview-layout{grid-template-columns:1fr;gap:28px}.reacher-information{width:92%;margin:-24px 0 0 auto;padding:20px}}
.reacher-hero-frame{position:relative;aspect-ratio:1;overflow:hidden}
.case-page .reacher-hero-frame .hero-img{position:absolute;width:170.667%;height:106.667%;max-width:none;max-height:none;left:-33.333%;top:-3.333%;object-fit:fill}
/* Unified overview: outcomes, problem, information, and design evidence. */
.merged-overview-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
.merged-overview .project-information{width:100%;margin-top:0;min-width:0}
.merged-overview .project-facts{width:100%}
.merged-overview .project-facts dd{overflow-wrap:anywhere}
.merged-problem{margin-top:32px;scroll-margin-top:25px}
.overview-evidence{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:28px;align-items:start;margin-top:42px}
.overview-evidence.without-insights{grid-template-columns:1fr}
.overview-evidence .insights{margin-top:0;min-width:0}
.overview-evidence .requirements-panel{padding:24px}
.case-page .overview-evidence .case-list{font-size:15px;line-height:1.65;columns:1}
.overview-evidence .insight-grid{margin-top:0;gap:10px}
.overview-evidence .insight-grid li{padding:17px}
.overview-evidence .insight-grid p{font-size:15px;line-height:1.65}
.overview-evidence h3{min-height:26px}
@media(max-width:1000px){.overview-evidence{grid-template-columns:1fr}.merged-overview-lead{gap:28px}}
@media(max-width:700px){.merged-overview-lead{grid-template-columns:1fr}.overview-evidence .insight-grid{grid-template-columns:1fr}.overview-evidence{margin-top:30px}.merged-overview .project-information{margin-top:0}}
/* Give the context image room beside outcome and project information. */
.rearranged-overview{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:36px;align-items:start}
.rearranged-overview .project-information{margin-top:28px;padding:24px}
.rearranged-overview .project-facts dt,.rearranged-overview .project-facts dd{font-size:14px;line-height:1.6}
.rearranged-overview .reacher-overview-visual{padding:0;height:100%;min-height:430px}
.rearranged-overview .reacher-overview-visual figure{height:100%}
.case-page .rearranged-overview .reacher-overview-visual img{width:100%;height:100%;object-fit:cover;object-position:38% center}
.full-width-problem{max-width:none;margin-top:38px}
.full-width-problem p{max-width:none}
@media(max-width:700px){.rearranged-overview{grid-template-columns:1fr}.rearranged-overview .reacher-overview-visual{height:auto;min-height:0}.case-page .rearranged-overview .reacher-overview-visual img{height:auto}.full-width-problem{margin-top:30px}}
/* Pair problem and requirements; let insights span the following row. */
.merged-overview .project-information,.reacher-information{background:var(--mint)}
.merged-overview .overview-evidence{display:block;margin-top:38px}
.problem-requirements-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:start}
.problem-requirements-row .full-width-problem{margin-top:0;padding-top:24px}
.problem-requirements-row .full-width-problem p{font-size:15px;line-height:1.65}
.merged-overview .overview-evidence .insights{margin-top:32px}
.merged-overview .overview-evidence .insight-grid{grid-template-columns:repeat(var(--insight-count),minmax(0,1fr));gap:14px}
@media(max-width:700px){.problem-requirements-row{grid-template-columns:1fr;gap:22px}.problem-requirements-row .full-width-problem{padding-top:0}.merged-overview .overview-evidence .insight-grid{grid-template-columns:1fr}}

/* Match information panels to the research insight surface. */
.merged-overview .project-information,.reacher-information{background:#f2f6f3}
/* Show the complete WAVE sketch beside its overview information. */
.rearranged-overview .wave-overview-sketch{min-height:0;display:flex;align-items:center}
.rearranged-overview .wave-overview-sketch figure{height:auto;width:100%}
.case-page .rearranged-overview .wave-overview-sketch img{height:auto;object-fit:contain}
/* Compact WAVE sketch, bottom-aligned with the information panel. */
.rearranged-overview .wave-overview-sketch{align-self:stretch;align-items:flex-end;justify-content:center}
.rearranged-overview .wave-overview-sketch figure{width:78%}
@media(max-width:700px){.rearranged-overview .wave-overview-sketch figure{width:85%}}
@media(min-width:701px){
 .rearranged-overview .wave-overview-sketch{position:relative;height:auto;min-height:0}
 .rearranged-overview .wave-overview-sketch figure{position:absolute;bottom:0;left:15%;width:70%;height:100%;display:flex;align-items:flex-end;justify-content:center}
 .case-page .rearranged-overview .wave-overview-sketch img{width:auto;max-width:100%;height:auto;max-height:100%;margin:0}
}
/* WAVE sketch fills the overview height; trim the source's blank margins. */
@media(min-width:701px){
 .rearranged-overview .wave-overview-sketch figure{left:50%;top:0;bottom:0;transform:translateX(-50%);width:auto;height:100%;aspect-ratio:512/732;max-width:100%;display:block;overflow:hidden}
 .case-page .rearranged-overview .wave-overview-sketch img{position:absolute;left:50%;top:-6.56%;transform:translateX(-50%);height:108.743%;width:auto;max-height:none;max-width:none;margin:0}
}
/* Smart Portafilter: image-first header and alternating concept studies. */
.portafilter-page .project-lead .project-header{grid-column:2;grid-row:1}
.portafilter-hero-frame{grid-column:1;grid-row:1;position:relative;aspect-ratio:604/800;overflow:hidden;width:85%;justify-self:center}
.case-page .portafilter-hero-frame .hero-img{position:absolute;inset:0 auto auto 0;width:211.92%;height:100%;max-width:none;max-height:none;object-fit:fill}
.rearranged-overview .portafilter-overview-sketch{height:auto;position:relative;align-self:stretch;min-height:0}
.rearranged-overview .portafilter-overview-sketch figure{position:absolute;inset:0;display:flex;align-items:center}
.case-page .rearranged-overview .portafilter-overview-sketch img{width:100%;height:100%;object-fit:contain}
.portafilter-development{display:grid;gap:60px}
.portafilter-concept{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:42px;align-items:center}
.portafilter-development h3{font-size:24px;margin-bottom:24px}
.portafilter-concept.reverse-concept{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.reverse-concept .concept-visual{grid-column:2;grid-row:1}
.reverse-concept .concept-test{grid-column:1;grid-row:1}
.reverse-concept .stage-finding{border-left:0;border-right:2px solid #a9cbb9;padding-left:0;padding-right:18px}
.portafilter-prototype{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px;align-items:center}
.portafilter-video-frame{overflow:hidden}
.portafilter-video-frame video{display:block;width:100%;height:auto;background:transparent}
.case-page .portafilter-user-journey img{width:100%;max-height:none;height:auto}
@media(max-width:700px){.portafilter-page .project-lead .project-header,.portafilter-hero-frame{grid-column:1;grid-row:auto}.portafilter-hero-frame{order:-1;width:75%}.rearranged-overview .portafilter-overview-sketch figure{position:static}.case-page .rearranged-overview .portafilter-overview-sketch img{height:auto}.portafilter-concept,.portafilter-concept.reverse-concept,.portafilter-prototype{grid-template-columns:1fr;gap:24px}.reverse-concept .concept-visual,.reverse-concept .concept-test{grid-column:1;grid-row:auto}.reverse-concept .stage-finding{border-right:0;border-left:2px solid #a9cbb9;padding-right:0;padding-left:16px}}

/* Refined Portafilter presentation and paired prototype media. */
.portafilter-page .project-lead .project-header{grid-column:1;grid-row:1}
.portafilter-hero-frame{grid-column:2;grid-row:1;width:100%;aspect-ratio:604/800;background:#ccc}
.case-page .portafilter-hero-frame .hero-img{left:-23%;clip-path:inset(0 52.8125% 0 0)}
.rearranged-overview .portafilter-overview-electronics{position:relative;align-self:stretch;min-height:0}
.rearranged-overview .portafilter-overview-electronics figure{position:absolute;inset:0;overflow:hidden;width:auto;max-width:100%;margin:auto;aspect-ratio:920/1090}
.case-page .rearranged-overview .portafilter-overview-electronics img{position:absolute;width:146.74%;height:165.14%;max-width:none;max-height:none;left:-22.83%;top:-27.52%;object-fit:fill}
.portafilter-concept.reverse-concept .stage-finding{text-align:right}
.portafilter-concept:nth-child(3) figure{position:relative;aspect-ratio:1350/1170;overflow:hidden;width:92%}
.case-page .portafilter-concept:nth-child(3) figure img{position:absolute;width:100%;height:153.846%;max-height:none;top:-47.86%;object-fit:fill}
.portafilter-final-process>p{max-width:900px;margin:0 0 28px}
.portafilter-prototype{grid-template-columns:minmax(0,1.932fr) minmax(0,1fr);gap:24px;align-items:stretch}
.portafilter-user-journey figure{height:100%;margin:0}
.case-page .portafilter-user-journey img{height:100%;width:100%;object-fit:contain}
.portafilter-video-frame{aspect-ratio:3/4}
.portafilter-video-frame video{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:700px){
.portafilter-page .project-lead .project-header,.portafilter-hero-frame{grid-column:1;grid-row:auto}
.portafilter-hero-frame{order:0;width:75%}
.rearranged-overview .portafilter-overview-electronics figure{position:relative;width:100%;max-width:380px}
.portafilter-prototype{grid-template-columns:1fr}
.portafilter-video-frame{width:75%;justify-self:center}
}
.portafilter-hero-frame{background:linear-gradient(#d7d8d5,#d3d3d1 25%,#cececc 50%,#c9cac7 75%,#c6c6c4)}
.case-page .portafilter-hero-frame .hero-img{mask-image:linear-gradient(to right,#000 45.8%,transparent 47.1875%)}

.portafilter-concept.reverse-concept .concept-visual h3{text-align:right}
.portafilter-prototype{grid-template-columns:minmax(0,1fr) minmax(0,1.932fr)}
.wave-hero-frame{position:relative;overflow:hidden;aspect-ratio:1172/662;width:100%;max-width:calc(max(280px,100svh - 430px)*1.7704);margin-inline:auto}
.case-page .wave-hero-frame .hero-img{position:absolute;left:0;bottom:0;width:100%;height:121.148%;max-height:none;object-fit:fill}
@media(max-width:700px){.portafilter-prototype{grid-template-columns:1fr}.wave-hero-frame{max-width:100%}}

/* Sony Bubble concept narrative. */
.rearranged-overview .sony-overview-render{position:relative;align-self:stretch;min-height:0}
.rearranged-overview .sony-overview-render figure{position:absolute;inset:0;overflow:hidden;aspect-ratio:300/310;max-width:100%;margin:auto}
.case-page .sony-overview-render figure img{position:absolute;left:-66.667%;top:-45.161%;width:333.333%;height:181.613%;max-width:none;max-height:none;object-fit:fill}
.case-page .sony-development .concept-visual figure img{width:auto;max-width:100%;height:auto;max-height:460px;margin-inline:auto}
.sony-clip-images{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.case-page .sony-clip-images img{height:440px;width:100%;object-fit:contain;background:transparent}
.sony-clip-concept>.stage-finding{max-width:650px;margin:28px auto 0;text-align:center}
.sony-assembly-images{display:grid;grid-template-columns:1fr 1.45fr;gap:32px;align-items:center;margin-top:28px}
.case-page .sony-assembly-images img,.case-page .sony-user-journey img{width:100%;height:auto;max-height:none}
.sony-user-journey{margin-top:40px}
.sony-page .final-wide figure{position:relative;overflow:hidden;aspect-ratio:1800/1020}
.case-page.sony-page .final-wide figure img{position:absolute;top:-9.804%;width:100%;height:119.608%;max-height:none;object-fit:fill}
@media(max-width:700px){.rearranged-overview .sony-overview-render figure{position:relative;width:100%;max-width:380px}.sony-clip-images,.sony-assembly-images{grid-template-columns:1fr}.case-page .sony-clip-images img{height:auto;max-height:440px;width:auto;max-width:100%;margin:auto}}
.case-page .rearranged-overview .sony-overview-render figure img{position:absolute;left:-66.667%;top:-45.161%;width:333.333%;height:181.613%;max-width:none;max-height:none;object-fit:fill}
/* Sony prototype image alignment and tighter concept crops. */
.sony-development .reverse-concept .concept-visual figure{position:relative;overflow:hidden;aspect-ratio:432/697;width:min(100%,285px);margin-inline:auto}
.case-page .sony-development .reverse-concept .concept-visual figure img{position:absolute;bottom:0;left:0;width:100%;height:111.478%;max-height:none;object-fit:fill}
.sony-clip-concept>.stage-finding{text-align:left}
.sony-development>.portafilter-concept:nth-child(4) .concept-visual figure{position:relative;overflow:hidden;aspect-ratio:262/298;width:min(100%,320px);margin-inline:auto}
.case-page .sony-development>.portafilter-concept:nth-child(4) .concept-visual figure img{position:absolute;left:0;top:-8.389%;width:100%;height:116.779%;max-height:none;object-fit:fill}
.sony-assembly-images{grid-template-columns:1.083fr 1.323fr;align-items:stretch}
.case-page .sony-assembly-images figure{align-self:stretch}
.case-page .sony-assembly-images img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.sony-assembly-images{grid-template-columns:1fr}.case-page .sony-assembly-images img{height:auto}}

/* Breville Drill: focused concept and prototype sequence. */
.drill-hero-frame{position:relative;aspect-ratio:568/796;overflow:hidden;width:100%}
.case-page .drill-hero-frame .hero-img{position:absolute;left:0;top:0;width:225.352%;height:100.503%;max-width:none;max-height:none;object-fit:fill}
.rearranged-overview .drill-overview-orthographic{position:relative;align-self:stretch;min-height:0}
.drill-overview-orthographic figure{position:absolute;inset:0;display:flex;align-items:center}
.case-page .rearranged-overview .drill-overview-orthographic img{width:100%;height:100%;object-fit:contain}
.drill-development h3{font-size:24px;margin-bottom:24px}
.drill-sketch-row{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:center}
.case-page .drill-sketch-row img{width:100%;height:auto;max-height:none}
.drill-initial-images{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:850px;margin:auto}
.case-page .drill-initial-images img{width:100%;height:auto;max-height:none}
.drill-development .stage-finding{max-width:700px;margin:28px auto 0}
.drill-final-prototype{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.case-page .drill-final-prototype img{width:100%;height:auto;max-height:none}
.case-page .drill-final-product figure{position:relative;aspect-ratio:975/778;overflow:hidden}
.case-page .drill-final-product figure img{position:absolute;left:-2.974%;top:-2.314%;width:131.282%;height:102.828%;max-width:none;max-height:none;object-fit:fill}
@media(max-width:700px){.drill-sketch-row,.drill-final-prototype{grid-template-columns:1fr}.drill-overview-orthographic figure{position:static}.case-page .rearranged-overview .drill-overview-orthographic img{height:auto}.drill-hero-frame{max-width:380px;margin:auto}}

.drill-initial-images figure{position:relative;overflow:hidden;aspect-ratio:1350/1600}
.case-page .drill-initial-images figure img{position:absolute;left:0;bottom:0;width:100%;height:112.5%;max-height:none;object-fit:fill}
.drill-final-prototype figure{position:relative;overflow:hidden;aspect-ratio:1800/1000}
.case-page .drill-final-prototype figure img{position:absolute;left:0;top:-45%;width:100%;height:180%;max-height:none;object-fit:fill}
.drill-final-renders{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:start}
.case-page .drill-final-renders img{width:100%;height:auto;max-height:none}
@media(max-width:700px){.drill-final-renders{grid-template-columns:1fr}}
/* Bring Breville final renders closer together. */
.drill-final-renders{gap:12px}
.case-page .drill-final-renders figure{position:relative;overflow:hidden;aspect-ratio:975/778}
.case-page .drill-final-renders figure img{position:absolute;left:-2.974%;top:-2.314%;width:131.282%;height:102.828%;max-width:none;max-height:none;object-fit:fill}
.case-page .drill-final-renders figure:nth-child(2) img{left:0;top:0;width:128.773%;height:100.503%}

/* Old Mate: wireframes, user flow and progressive prototypes. */
.rearranged-overview .old-mate-overview-image{position:relative;align-self:stretch;min-height:0}
.old-mate-overview-image figure{position:absolute;inset:0;overflow:hidden}
.case-page .rearranged-overview .old-mate-overview-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.old-mate-development{display:grid;gap:58px}
.old-mate-development h3{font-size:24px;margin-bottom:24px}
.old-mate-process-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:36px;align-items:center}
.case-page .old-mate-development figure img{width:100%;height:auto;max-width:none;max-height:none}
.old-mate-development article>figure{margin-top:24px}
.old-mate-development article>.stage-finding{text-align:left;margin-top:24px}
@media(max-width:700px){.old-mate-process-row{grid-template-columns:1fr}.old-mate-overview-image figure{position:static}.case-page .rearranged-overview .old-mate-overview-image img{height:auto}}
.rearranged-overview .old-mate-overview-image figure{aspect-ratio:709/1013;max-width:100%;margin:auto}
.case-page .rearranged-overview .old-mate-overview-image img{position:absolute;inset:0 auto auto 0;width:253.879%;height:100%;max-width:none;max-height:none;object-fit:fill}
@media(max-width:700px){.rearranged-overview .old-mate-overview-image figure{position:relative;max-width:350px}.case-page .rearranged-overview .old-mate-overview-image img{height:100%}}

/* Old Mate prototype iteration and readable wireframes. */
.old-mate-sketch{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.old-mate-sketch figure{position:relative;aspect-ratio:700/880;overflow:hidden;max-width:410px;width:100%;margin:auto}
.case-page .old-mate-sketch figure img{position:absolute;left:-78.571%;top:-6.818%;width:257.143%;height:115.114%;object-fit:fill}
.old-mate-development .old-mate-flow>.stage-finding{margin-left:0;font-size:clamp(11px,1.2vw,14px);padding-left:12px}
.old-mate-flow .stage-finding strong{font-size:inherit}
.prototype-feedback-arrow{display:flex;align-items:center;gap:16px;margin:22px 0;color:#a9cbb9}
.prototype-feedback-arrow svg{width:24px;height:86px;flex-shrink:0}
.prototype-feedback-arrow p{margin:0;font-size:14px}
.prototype-feedback-arrow strong{display:block;margin-bottom:8px;font-size:13px;color:#456052}
.old-mate-development .prototype-feedback-arrow+figure{margin-top:0}
@media(max-width:700px){.old-mate-sketch{grid-template-columns:1fr}.old-mate-development .old-mate-flow>.stage-finding{font-size:13px}}
/* Match stacked project introductions to their banner width. */
.case-page .project-lead:not(.split-lead) .project-header{width:100%;max-width:none}
.case-page .project-lead:not(.split-lead) .project-header p{max-width:none;width:100%}
.case-page .project-lead:has(.wave-hero-frame) .project-header{max-width:calc(max(280px,100svh - 430px)*1.7704);margin-inline:auto}
@media(max-width:700px){.case-page .project-lead:has(.wave-hero-frame) .project-header{max-width:100%}}
/* Old Mate: compact opening and larger, tightly framed prototype screens. */
.old-mate-page .project-lead:not(.split-lead) .project-header{margin-top:20px;margin-bottom:14px}
.old-mate-page .project-header>p:last-child{margin-bottom:0}
.old-mate-prototypes>figure{position:relative;overflow:hidden;aspect-ratio:1000/630}
.case-page .old-mate-prototypes>figure img{position:absolute;left:-40%;top:-30.159%;width:180%;height:160.794%;max-width:none;max-height:none;object-fit:fill}
.old-mate-prototypes>.prototype-feedback-arrow+figure{aspect-ratio:1260/830}
.case-page .old-mate-prototypes>.prototype-feedback-arrow+figure img{left:-20.635%;top:0;width:142.857%;height:122.048%}
@media(min-width:701px){.old-mate-page .project-lead{max-width:min(100%,calc(max(280px,100svh - 430px)*1.777));margin-inline:auto}}
/* Match the screen scale across Old Mate's prototype iterations. */
.old-mate-prototypes>figure:first-of-type{width:79.365%;margin-inline:auto}
/* Keep Old Mate's opening aligned with the full content column. */
.old-mate-page .project-lead{width:100%;max-width:none;margin-inline:0}
/* Tighten the transition from prototype feedback to the second iteration. */
.old-mate-prototypes .prototype-feedback-arrow{margin-bottom:6px}
/* Keep the iteration feedback closely connected to Prototype 2. */
.old-mate-prototypes .prototype-feedback-arrow{margin-bottom:0;align-items:flex-end}
.old-mate-prototypes .prototype-feedback-arrow svg{height:56px}
.old-mate-prototypes .prototype-feedback-arrow p{padding-bottom:2px}
.old-mate-prototypes>.prototype-feedback-arrow+figure{margin-top:0}
/* UI case studies: research, decisions and final interfaces. */
.ui-development{display:grid;gap:44px}
.ui-development h3{font-size:24px;margin-bottom:22px}
.case-page .ui-development figure img{width:100%;height:auto;max-height:none}
.ui-development article>figure{margin-top:24px}
.pod-sketch-decision{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:28px;align-items:center}
.rearranged-overview .ui-overview-thumbnail{position:relative;align-self:stretch;min-height:0}
.ui-overview-thumbnail figure{position:absolute;inset:0;overflow:hidden}
.case-page .rearranged-overview .ui-overview-thumbnail img{width:100%;height:100%;object-fit:cover}
.return-research-images{display:grid;gap:24px;margin-top:24px}
.return-booth-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center}
.return-booth-row video{width:100%;height:auto;display:block}
@media(max-width:700px){.pod-sketch-decision,.return-booth-row{grid-template-columns:1fr}.ui-overview-thumbnail figure{position:static}.case-page .rearranged-overview .ui-overview-thumbnail img{height:auto}}
/* Graphic design case-study narratives. */
.graphic-development{display:grid;gap:24px}
.case-page .graphic-development img,.case-page .logo-development img{width:100%;height:auto;max-height:none}
.rearranged-overview .graphic-overview-image{position:relative;align-self:stretch;min-height:0}
.graphic-overview-image figure{position:absolute;inset:0;display:flex;align-items:center}
.case-page .rearranged-overview .graphic-overview-image img{width:100%;height:100%;object-fit:contain}
.logo-needs-row{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center}
.logo-prototypes-row{display:grid;grid-template-columns:1fr 1.8fr;gap:36px;align-items:center}
.logo-palette{width:24%;margin:0 0 22px auto}
.logo-initial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:center}
.logo-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
@media(max-width:700px){.logo-needs-row,.logo-prototypes-row{grid-template-columns:1fr}.graphic-overview-image figure{position:static}.case-page .rearranged-overview .graphic-overview-image img{height:auto}}
/* Preserve complete overview devices and align research boards. */
.case-page.return-page .rearranged-overview .ui-overview-thumbnail img{object-fit:contain;object-position:center;background:transparent}
.return-research-images{grid-template-columns:1fr 1fr;align-items:stretch}
.case-page .return-research-images figure img{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
@media(max-width:700px){.return-research-images{grid-template-columns:1fr}}
.return-research-images figure{aspect-ratio:1800/1013;min-width:0}
/* Remove research-board margins to make their text legible. */
.return-research-images{grid-template-columns:950fr 650fr;gap:24px}
.return-research-images figure{position:relative;overflow:hidden;aspect-ratio:1}
.return-research-images figure:nth-child(2){aspect-ratio:650/950}
.case-page .return-research-images figure:first-child img{position:absolute;left:-44.21%;top:-5.263%;width:189.474%;height:106.632%;max-width:none;object-fit:fill}
.case-page .return-research-images figure:nth-child(2) img{position:absolute;left:-7.692%;top:-5.789%;width:276.923%;height:106.632%;max-width:none;object-fit:fill}
.foods-final-row{display:grid;grid-template-columns:1fr .714286fr 1.413428fr;gap:18px;align-items:stretch}
.case-page .foods-final-row figure img{width:100%;height:100%;object-fit:cover}
.foods-final-row figure:first-child{aspect-ratio:1}
@media(max-width:700px){.return-research-images{grid-template-columns:1fr}.foods-final-row{gap:8px}}
/* Fill the Return & Earn overview frame with the device close-up. */
.return-page .rearranged-overview .ui-overview-thumbnail{height:auto;min-height:0;align-self:stretch}
.return-page .rearranged-overview .ui-overview-thumbnail figure{position:absolute;inset:0;height:100%;overflow:hidden;background:#8bd0c8}
.case-page.return-page .rearranged-overview .ui-overview-thumbnail img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:700px){.return-page .rearranged-overview .ui-overview-thumbnail figure{position:relative;aspect-ratio:1}.case-page.return-page .rearranged-overview .ui-overview-thumbnail img{position:absolute;inset:0;height:100%}}
/* Enlarge POD logo boards and crop their surrounding empty canvas. */
.logo-development .logo-prototypes-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.logo-development .logo-prototypes-row>figure{position:relative;overflow:hidden;width:100%;justify-self:end;aspect-ratio:680/356}
.case-page .logo-development .logo-prototypes-row>figure img{position:absolute;left:-20%;top:-53.933%;width:200.882%;height:215.73%;max-width:none;max-height:none;object-fit:fill;background:transparent}
.logo-development article:last-child .logo-prototypes-row>figure{aspect-ratio:560/552}
.case-page .logo-development article:last-child .logo-prototypes-row>figure img{left:-35.714%;top:-15.942%;width:243.929%;height:139.13%}
@media(max-width:700px){.logo-development .logo-prototypes-row{grid-template-columns:1fr}}
/* Slightly reduce the final logo board while retaining right alignment. */
.logo-development article:last-child .logo-prototypes-row>figure{width:85%;justify-self:end}
/* Product visualisation: alternating image-led portfolio rows. */
.rearranged-overview .campaign-overview-image{position:relative;align-self:stretch;min-height:0}
.campaign-overview-image figure{position:absolute;inset:0;overflow:hidden}
.case-page .rearranged-overview .campaign-overview-image img{position:absolute;left:-2.974%;top:-2.314%;width:131.282%;height:102.828%;max-width:none;max-height:none;object-fit:cover;object-position:left center}
.campaign-final{display:grid;gap:60px}
.campaign-row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:38px;align-items:center}
.campaign-row h3{font-size:24px;margin-bottom:22px}
.case-page .campaign-row img{width:100%;height:auto;max-height:none}
.campaign-reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}
.campaign-reverse .campaign-visual{grid-column:2;grid-row:1}
.campaign-reverse>p{grid-column:1;grid-row:1}
.campaign-reverse h3{text-align:right}
.campaign-reverse:nth-child(2) figure{position:relative;aspect-ratio:568/796;overflow:hidden;max-width:420px;margin-left:auto}
.case-page .campaign-reverse:nth-child(2) figure img{position:absolute;left:0;top:0;width:225.352%;height:100.503%;max-width:none;object-fit:fill}
@media(max-width:700px){.campaign-row,.campaign-reverse{grid-template-columns:1fr}.campaign-reverse .campaign-visual,.campaign-reverse>p{grid-column:1;grid-row:auto}.campaign-overview-image figure{position:relative;aspect-ratio:1}.campaign-reverse:nth-child(2) figure{margin-inline:auto}}
/* Consistent proportions for split project introductions. */
.case-page .project-lead.split-lead{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px}
.case-page .project-lead.split-lead>.hero-img{width:100%;justify-self:end}
.case-page .project-lead.split-lead>.drill-hero-frame,.case-page .project-lead.split-lead>.portafilter-hero-frame,.case-page .project-lead.split-lead>.reacher-hero-frame{width:100%;justify-self:end}
/* Uniform campaign rows with the copy aligned to the image's top edge. */
.campaign-row,.campaign-row.campaign-reverse{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:38px;align-items:start}
.campaign-row .campaign-visual{grid-column:1;grid-row:1}
.campaign-row>p{grid-column:2;grid-row:1;margin:51px 0 0}
.campaign-row h3{line-height:29px;text-align:left;margin:0 0 22px}
.campaign-row figure,.campaign-reverse:nth-child(2) figure{position:relative;aspect-ratio:1;overflow:hidden;max-width:none;width:100%;margin:0}
.case-page .campaign-row figure img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.case-page .campaign-row:nth-child(2) figure img{width:225.352%;height:140.845%;left:0;top:-20.422%;object-fit:fill}
@media(max-width:700px){.case-page .project-lead.split-lead{grid-template-columns:1fr;gap:25px}.campaign-row,.campaign-row.campaign-reverse{grid-template-columns:1fr;gap:20px}.campaign-row .campaign-visual,.campaign-row>p{grid-column:1;grid-row:auto}.campaign-row>p{margin:0}}
.logo-final-one-row>figure{margin-top:24px}
.case-page .logo-final-one-row>figure img{display:block;width:100%;height:auto;max-height:none}
/* Campaign header crop and two-by-two final work gallery. */
.campaign-hero-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:616/792;justify-self:end}
.case-page .campaign-hero-frame .hero-img{position:absolute;left:-3.409%;top:-1.01%;width:207.792%;height:101.01%;max-width:none;max-height:none;object-fit:fill}
.campaign-final{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.campaign-final .campaign-row{display:block;min-width:0}
.campaign-final .campaign-row>p{margin:18px 0 0}
@media(max-width:700px){.campaign-final{grid-template-columns:1fr}}
/* Trim the empty vertical canvas around the final logo row. */
.logo-final-one-row>p{margin-bottom:10px}
.logo-final-one-row>figure{position:relative;overflow:hidden;aspect-ratio:1366/289;margin-top:10px}
.case-page .logo-final-one-row>figure img{position:absolute;left:0;top:-83.045%;width:100%;height:265.744%;max-width:none;max-height:none;object-fit:fill}
/* Preserve the full Wave render within its square campaign tile. */
.campaign-final .campaign-row:last-child figure{background:#fff}
.case-page .campaign-final .campaign-row:last-child figure img{object-fit:contain;object-position:center;background:#fff}
/* A roomier hover menu anchored to the hamburger icon's right edge. */
#site-navigation{padding:24px 24px;max-width:calc(100vw - 24px)}
#site-navigation nav{gap:26px}
#site-navigation nav a{font-size:18px}
/* Bhavika's supplied brand mark, consistent across headers and footers. */
.logo{position:relative;display:block;width:48px;height:48px;overflow:hidden;flex-shrink:0}
.logo img{position:absolute;display:block;left:-12.09%;top:-17.77%;width:124.176%;height:164.92%;max-width:none;object-fit:fill}
.footer-logo{width:64px;height:64px}
@media(max-width:700px){.logo{width:42px;height:42px}.footer-logo{width:54px;height:54px}}
/* Dock the side panel to the viewport, without an empty strip beside it. */
#site-navigation{right:0}
/* Keep hover navigation directly beside its trigger instead of a distant drawer. */
#site-navigation{inset:auto 12px auto auto;height:auto;max-height:calc(100dvh - 110px);border-radius:12px;padding:18px 24px 24px;box-shadow:0 12px 40px #0002}
#site-navigation nav{padding:16px 0 0;gap:22px}
/* Portfolio-wide whitespace refinement, preserving complete artwork. */
.trimmed-artwork{position:relative;overflow:hidden;width:100%;background:transparent}
.case-page .section{padding:48px 0}
.case-page .section-heading{margin-bottom:26px}
.case-page .project-header{margin-bottom:24px}
.case-page .process-sequence,.reacher-development,.wave-development,.portafilter-development,.sony-development,.old-mate-development,.ui-development{gap:36px}
.case-page .section .reacher-stage-title{margin-bottom:20px}
.case-page .graphic-development{gap:18px}
.case-page .overview-evidence{margin-top:28px}
.case-page .gallery{gap:20px;margin-top:24px}
.case-page .sony-user-journey{margin-top:24px}
.case-page .project-nav{padding:28px 0}
footer.site-footer{margin-top:64px}
.case-page footer.site-footer{margin-top:36px}
.old-mate-prototypes>.prototype-feedback-arrow+figure{aspect-ratio:1260/620}
.case-page .old-mate-prototypes>.prototype-feedback-arrow+figure img{top:-31.452%;height:163.387%}
.old-mate-development .old-mate-flow>.stage-finding{margin-top:16px}
.case-page .logo-final-one-row>figure{margin-top:10px}
@media(max-width:700px){.case-page .section{padding:34px 0}.case-page .section-heading{margin-bottom:22px}.case-page .process-sequence,.reacher-development,.wave-development,.portafilter-development,.sony-development,.old-mate-development,.ui-development{gap:28px}footer.site-footer{margin-top:44px}}
/* Visible navigation and a welcoming contact section. */
body>header{gap:30px;max-width:1320px;width:100%;padding:26px 5%;}
.header-navigation{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.6vw,38px);margin-left:auto;flex-wrap:wrap}
.header-navigation a{font-size:15px;line-height:1.5;text-decoration:none;white-space:nowrap;padding:8px 0}
.header-navigation a:hover{color:#527764;text-decoration:underline;text-underline-offset:6px}
footer.site-footer.connect-footer{display:block;background:#ededed;padding:54px 5% 58px;text-align:center;border:0;max-width:none}
.connect-inner{max-width:990px;margin:auto}
.connect-kicker{font-size:15px;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px;color:#555e58}
.connect-footer h2{font-size:clamp(38px,5.5vw,70px);letter-spacing:-2px;line-height:1.1;margin:0 0 28px;color:#191b1b}
.connect-links{display:flex;flex-direction:column;align-items:center;gap:14px}
.connect-links a{display:inline-flex;align-items:center;gap:10px;color:#494d4b;font-size:16px;line-height:1.5;text-decoration:none;min-height:32px}
.connect-links a:hover{color:#191b1b;text-decoration:underline;text-underline-offset:5px}
.connect-links svg{width:21px;height:21px;flex-shrink:0}
@media(max-width:700px){body>header{align-items:flex-start;gap:20px;padding:22px 5%}.header-navigation{gap:5px 16px}.header-navigation a{font-size:13px;padding:4px 0}.connect-links a{font-size:14px}.connect-footer h2{letter-spacing:-1px}footer.site-footer.connect-footer{padding:40px 5%}}
.home-page .portrait{position:relative;padding:0;overflow:hidden}
.home-page .portrait img{position:absolute;width:175.385%;height:233.846%;max-width:none;left:-38.462%;top:-92.308%;object-fit:fill}
.connect-footer .contact-logo{width:52px;height:52px;margin:26px auto 0}
/* Selected category and balanced portrait/contact spacing. */
.categories .pill[aria-current="page"]{background:var(--mint);border-color:var(--mint);color:#191b1b}
.home-page .portrait{width:94px;height:94px}
.home-page .portrait img{left:-34.615%;top:-88.462%}
.connect-footer .contact-logo{margin-top:42px}
@media(max-width:700px){.home-page .portrait{width:88px;height:88px}}
/* Floating header: reveal on upward scroll and keyboard navigation. */
body>header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);transition:transform .22s ease,box-shadow .22s ease}
body>header.navigation-scrolled{box-shadow:0 5px 20px #15251d0d}
body>header.navigation-hidden{transform:translateY(-105%)}
body>header:focus-within{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){body>header{transition:none}}
.home-page .portrait{width:112px;height:112px}
@media(max-width:700px){.home-page .portrait{width:102px;height:102px}}

/* Matching navigation at both ends of every project. */
.project-top-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:35px 0 10px}
.case-page .project-top-nav .category-back-pill{margin:0}
.project-top-nav .category-back-pill svg{flex-shrink:0}
@media(max-width:500px){.project-top-nav{gap:10px}.case-page .project-top-nav .category-back-pill{padding:10px 12px;font-size:11px;gap:6px}.project-top-nav .next-project-pill{margin-left:auto}}