/* Project cover: preserve the copy, let the product sit directly in the light. */
.case-page .case-hero{position:relative;isolation:isolate;background:radial-gradient(ellipse 63% 36% at 50% 5%,#2179ac75,transparent 80%),radial-gradient(ellipse 35% 27% at 65% 0,#5762ce3a,transparent 85%)}.case-page .case-hero:before{content:'';position:absolute;z-index:-1;top:-230px;left:18%;right:18%;height:470px;background:#4199d5;filter:blur(145px);opacity:.23;pointer-events:none}.case-page .cover-media{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0;max-width:1040px;margin:0 auto}.case-page .cover-media a{overflow:visible}.case-page .cover-media img{width:100%;height:auto;min-height:0;object-fit:contain;filter:drop-shadow(0 35px 40px #0006)}.cover-media-note{text-align:center}.case-page .cover-overview{margin-top:40px}.header{transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .25s}.case-scrolled .header{transform:translateY(-115%);opacity:0;pointer-events:none}.sticky-back{position:fixed;left:32px;top:22px;z-index:25;display:flex;gap:12px;align-items:center;color:#c3ceda;background:#1d232ce6;border:1px solid #ffffff1d;box-shadow:0 8px 25px #0003;border-radius:30px;padding:10px 17px;font-size:13px;backdrop-filter:blur(18px);opacity:0;visibility:hidden;translate:0 -12px;transition:opacity .3s,translate .3s,visibility .3s}.case-scrolled .sticky-back{opacity:1;visibility:visible;translate:0 0}.contents-mobile{display:none}.section-nav{border:0;box-shadow:none;background:#15171ceb;top:0}.case-scrolled .section-nav{top:0}.section-nav a{white-space:nowrap}.section-nav>div{gap:22px}.section-nav a{font-size:11px}.section-nav:after{display:none}.subsection-label{font-size:11px;letter-spacing:1.7px;color:#b8c9da;margin-bottom:24px}.decision[id]{scroll-margin-top:100px}.launch-section{border-top:1px solid var(--line)}.launch-path{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}.launch-path article{border-top:1px solid #ffffff24;padding:21px 0 0}.launch-path span{font-size:11px;letter-spacing:1px;color:#7793a9}.launch-path h3{font-size:20px;margin:10px 0}.launch-path p{font-size:15px}.learning-table{border:1px solid #ffffff13;border-radius:12px;overflow:hidden;background:#181b21}.learning-table>div{padding:26px;gap:35px}.learning-table>div:last-child{border-bottom:0}.learning-table .table-head{background:#20252d;padding:17px 26px}.decision .decision-visual{transition:box-shadow .4s,border-color .4s}.decision .decision-visual:hover{border-color:#afcce04a;box-shadow:0 15px 60px #4c91c814}.case-page .footer{margin-top:20px}
/* The Work homepage shares the case-study typography and light treatment. */
.home-page{--ambient-rgb:74,126,181;background:var(--page-background)}.home-page:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 15%,rgba(var(--ambient-rgb),.16),transparent 65%);transition:background .8s}.home-intro{position:relative;padding-top:166px;perspective:1400px}.home-signal{font-size:11px;color:#98a7b5;letter-spacing:1.7px;display:flex;align-items:center;gap:12px;margin-bottom:28px}.home-signal>span{font-size:22px;color:#bdd9f0}.intro-window{position:relative;border:1px solid #ffffff27;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at var(--intro-x,70%) var(--intro-y,0%),#305f8738,transparent 80%),linear-gradient(130deg,#282d3980,#14171b);box-shadow:0 40px 90px #0004,inset 0 1px 0 #ffffff22;transform:rotateX(var(--home-tilt,0deg));transform-origin:50% 75%}.intro-window-top{padding:17px 26px;border-bottom:1px solid #ffffff10;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1.3px;color:#6e8598}.intro-window-content{padding:60px 56px 46px}.intro-window h1{font-size:clamp(43px,5.3vw,68px);line-height:1.14;letter-spacing:-.035em;font-weight:450;margin:0;text-shadow:0 -3px 40px #dbeaff15}.intro-window h1 span{color:#a6b3c4}.home-intro-bottom{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-top:55px}.home-intro-bottom p{font-size:16px;line-height:1.75;color:#939eae}.intro-plus{font-size:32px;line-height:1;color:#637182;font-weight:300}.window-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#b1dbff07 47%,#d6eaff17 50%,#9abbff05 53%,transparent 68%);transform:translateX(var(--shine,-60%));opacity:.7}.home-scroll{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#8898a8;padding:30px 0}.home-scroll span{font-size:22px}.work-list{padding-top:75px;padding-bottom:30px;display:grid;gap:52px}.work-list-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:-20px}.work-list-heading h2{font-size:18px;font-weight:400;letter-spacing:-.01em}.work-list-heading>span{font-size:11px;color:#75808f}.work-card{position:relative;isolation:isolate;display:block;border:1px solid #ffffff1a;border-radius:18px;overflow:hidden;background:#171a20;box-shadow:0 20px 70px #0003;transition:border-color .6s,box-shadow .6s,transform .6s}.work-card:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at var(--card-x,50%) var(--card-y,50%),rgba(var(--card-rgb),.32),transparent 70%),linear-gradient(145deg,rgba(var(--card-rgb),.05),transparent);opacity:.22;transition:opacity .65s}.work-card:hover,.work-card:focus-visible{border-color:rgba(var(--card-rgb),.5);box-shadow:0 15px 75px rgba(var(--card-rgb),.11),0 0 0 1px #ffffff04;transform:translateY(-4px)}.work-card:hover:before,.work-card:focus-visible:before{opacity:1}.work-card-top{position:relative;display:flex;justify-content:space-between;align-items:start;gap:28px;padding:34px 38px}.project-category{font-size:10px;letter-spacing:1.3px;color:#8e9baa}.work-card h3{font-size:32px;font-weight:450;line-height:1.25;margin:12px 0 10px;letter-spacing:-.025em}.work-card-top p{font-size:15px;max-width:660px;line-height:1.65;color:#9da5b0}.project-arrow{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border:1px solid #ffffff20;border-radius:50%;font-size:23px;color:#a1adba;transition:background .4s,transform .4s}.work-card:hover .project-arrow,.work-card:focus-visible .project-arrow{transform:rotate(45deg);color:#eff6ff;background:rgba(var(--card-rgb),.2)}.work-card-art{height:470px;margin:0 28px;overflow:hidden;border-radius:9px;background:rgba(var(--card-rgb),.045);display:flex;align-items:center;justify-content:center}.work-card-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s cubic-bezier(.2,.7,.2,1)}.work-card:hover .work-card-art img,.work-card:focus-visible .work-card-art img{transform:scale(1.035)}.work-card-art.cutout-art{background:none;height:460px}.cutout-art img{object-fit:contain;width:100%;filter:drop-shadow(0 20px 30px #0005)}.work-card-foot{display:flex;justify-content:space-between;gap:20px;padding:21px 38px;color:#7d8c9d;font-size:11px}.home-close{padding:110px 0 75px;border-bottom:1px solid #ffffff12}.home-close h2{font-size:38px;line-height:1.4;font-weight:400;color:#b1bac7;margin:20px 0 28px}.home-close>a{font-size:14px;display:inline-flex;gap:30px;color:#d0dbe8}.home-footer{display:flex;flex-wrap:wrap;gap:28px;padding:35px 0;color:#7f8b9c;font-size:12px}.home-footer span{margin-left:auto}.home-page .header{background:linear-gradient(#101114ea,#10111400)}
@media(min-width:1500px){.case-page .section-nav{background:none;top:28%;max-height:65vh;overflow-y:auto}.section-nav>div{gap:0}.section-nav a{font-size:12px;padding:7px 0}.section-nav a[aria-current]:before{top:17px}}
@media(max-width:1499px){.case-page .section-nav{display:none}.contents-mobile{display:block;position:fixed;right:28px;top:21px;z-index:24;margin:0;border:1px solid #ffffff18;border-radius:23px;background:#1c232ded;backdrop-filter:blur(20px);opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .3s,translate .3s;max-width:260px;min-width:155px;box-shadow:0 8px 25px #0003}.case-scrolled .contents-mobile{opacity:1;visibility:visible;translate:0 0}.contents-mobile summary{font-size:12px;gap:30px;padding:10px 16px;color:#c0cedc}.contents-mobile summary span{font-size:14px}.contents-mobile[open]{border-radius:17px}.contents-mobile nav{display:flex;flex-direction:column;padding:0 9px 9px;max-height:65vh;overflow:auto}.contents-mobile nav a{font-size:12px;padding:7px 10px;color:#92a3b7;border-radius:7px}.contents-mobile nav a[aria-current],.contents-mobile nav a:hover{color:#ebf1f8;background:#ffffff0a}.contents-mobile[open] summary span{transform:rotate(180deg)}}
@media(max-width:700px){.sticky-back{left:16px;top:16px;font-size:12px;padding:9px 13px}.contents-mobile{right:16px;top:16px}.contents-mobile summary{padding:9px 14px}.case-page .case-hero:before{top:-130px;height:300px;left:0;right:0;filter:blur(95px)}.case-page .cover-media{margin:0 -20px;width:calc(100% + 40px);max-width:none}.case-page .cover-media img{min-height:0}.cover-overview{margin-top:22px}.launch-path{grid-template-columns:1fr;gap:22px}.learning-table>div{padding:22px}.home-intro{padding-top:122px}.home-signal{font-size:9px;letter-spacing:1px;margin-bottom:20px}.intro-window{border-radius:13px}.intro-window-top{padding:13px 17px;font-size:8px;letter-spacing:.6px}.intro-window-content{padding:36px 23px 30px}.intro-window h1{font-size:clamp(35px,8.6vw,50px);line-height:1.18;letter-spacing:-.035em}.home-intro-bottom{margin-top:35px;gap:16px}.home-intro-bottom p{font-size:13px}.intro-plus{font-size:22px}.work-list{padding-top:45px;gap:32px}.work-list-heading{margin-bottom:0}.work-card{border-radius:13px}.work-card-top{padding:25px 23px;gap:16px}.work-card h3{font-size:26px}.work-card-top p{font-size:14px}.project-category{font-size:9px}.project-arrow{width:34px;height:34px;font-size:19px}.work-card-art,.work-card-art.cutout-art{height:260px;margin:0 15px}.work-card-art:not(.cutout-art) img{object-fit:contain}.work-card-foot{padding:17px 23px;font-size:10px}.work-card-foot span:last-child{white-space:nowrap}.home-close{padding:65px 0 45px}.home-close h2{font-size:29px}.home-footer{gap:18px;font-size:11px}.home-footer span{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.header,.sticky-back,.contents-mobile,.work-card,.work-card:before,.work-card-art img,.project-arrow{transition:none}.work-card:hover,.work-card:focus-visible{transform:none}.work-card:hover img{transform:none}.window-glint{display:none}.intro-window{transform:none!important}}
.final-designs-section{padding:60px 0 15px;border-top:1px solid var(--line);scroll-margin-top:100px}.final-designs-intro{max-width:650px;margin-top:22px;font-size:17px}.final-designs-section .full-width{border-radius:12px;margin-bottom:14px}
html.motion-off{scroll-behavior:auto}.motion-off .reveal{opacity:1;translate:none;transition:none}.motion-off .work-card,.motion-off .work-card:before,.motion-off .project-arrow,.motion-off .work-card-art img{transition:none}.motion-off .work-card:hover,.motion-off .work-card:focus-visible,.motion-off .work-card:hover img{transform:none}.motion-off .window-glint{display:none}.motion-off .case-cover{animation:none}.motion-off .header,.motion-off .sticky-back,.motion-off .contents-mobile{transition:none}
@media(max-width:380px){.header .wordmark img{width:88px}.main-nav a{padding:7px 10px}.header .motion-control{font-size:0;width:32px;height:32px;padding:0}.header .motion-control:after{content:'◐';font-size:16px}}
/* Original transparent artwork supplied by Dan Smith. */
.case-page .cover-media{max-width:740px}.case-page .cover-media img{width:100%;height:680px;object-fit:contain;filter:none}.work-card-art.cutout-art{height:490px}.work-card-art.cutout-art img{object-fit:contain;filter:none;padding:12px 0}
@media(max-width:700px){.case-page .cover-media{margin:0 auto;width:100%;max-width:480px}.case-page .cover-media img{height:auto;max-height:540px;object-fit:contain}.work-card-art.cutout-art{height:320px}.work-card-art.cutout-art img{padding:6px 0}}
/* Native scrolling and an always-visible back control on case studies. */
html{scroll-behavior:auto}.case-page .sticky-back{opacity:1;visibility:visible;translate:0 0}.case-page .case-hero{padding-top:90px}
@media(max-width:700px){.case-page .case-hero{padding-top:80px}}
/* Crisp navigation icons, independent of font metrics. */
.sticky-back{gap:10px}.back-arrow{display:block;flex:none;transition:transform .28s cubic-bezier(.2,.7,.2,1)}.sticky-back:hover .back-arrow,.sticky-back:focus-visible .back-arrow{animation:back-arrow-nudge .55s ease both}.sticky-back:hover{border-color:#ffffff3a}.contents-mobile summary{display:flex;align-items:center;justify-content:space-between;line-height:20px;gap:22px;min-height:42px}.contents-mobile .contents-chevron{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;line-height:1;transition:transform .2s ease}.contents-chevron svg{display:block;width:18px;height:18px}.contents-mobile[open] summary .contents-chevron{transform:rotate(180deg)}
@keyframes back-arrow-nudge{0%{transform:translateX(0)}45%{transform:translateX(-5px)}100%{transform:translateX(-3px)}}
/* Type-led homepage opening; projects retain their card treatment. */
.text-intro{padding-top:165px;padding-bottom:35px;position:relative;isolation:isolate;perspective:none}.text-intro-light{position:absolute;inset:40px -12% -20px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--intro-x,65%) var(--intro-y,35%),#367ab529,transparent 58%);opacity:.8;-webkit-mask-image:radial-gradient(ellipse closest-side at center,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at center,#000 40%,transparent 100%)}.text-intro .home-signal{font-size:11px;letter-spacing:1.5px;color:#a0afbd;gap:15px;margin:0 0 36px}.text-intro .home-signal .intro-separator{font-size:15px;color:#536a80}.text-intro h1{font-size:clamp(50px,6.9vw,90px);font-weight:400;line-height:1.15;letter-spacing:-.03em;margin:0;color:#e6ebf1}.headline-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.headline-line>span{display:block;width:fit-content;animation:headline-rise 1.05s cubic-bezier(.2,.7,.2,1) both}.headline-line:nth-child(2)>span{animation-delay:.12s}.headline-line:nth-child(3)>span{animation-delay:.24s}.headline-line .headline-accent{color:#99bcd9;background:linear-gradient(110deg,#7fa1c1 5%,#d5edff 35%,#a5a5e2 58%,#87aecb 78%);background-size:210% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:headline-rise 1.05s .24s cubic-bezier(.2,.7,.2,1) both,headline-light 3.5s 1s ease-out 1 forwards}.text-intro-bottom{display:grid;grid-template-columns:1fr 1.3fr;align-items:end;gap:50px;margin-top:46px}.text-intro-bottom p{font-size:16px;line-height:1.75;color:#94a0af;margin:0}.text-work-link{display:inline-flex;align-items:center;gap:24px;width:fit-content;font-size:13px;color:#c6d3df;padding:12px 0}.text-work-link svg{transition:transform .25s}.text-work-link:hover svg{transform:translateY(4px)}.home-page .work-list{padding-top:64px}.text-intro-bottom{animation:intro-detail-in .8s .5s both}
@keyframes headline-rise{from{opacity:0;transform:translateY(110%) rotate(1deg);filter:blur(3px)}to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}@keyframes headline-light{from{background-position:100% 50%}to{background-position:0% 50%}}@keyframes intro-detail-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.text-intro{padding-top:126px;padding-bottom:12px}.text-intro .home-signal{font-size:9px;letter-spacing:.9px;gap:9px;margin-bottom:28px}.text-intro h1{font-size:clamp(34px,8.1vw,56px);line-height:1.18;letter-spacing:-.025em}.text-intro-bottom{grid-template-columns:1fr;gap:22px;margin-top:29px}.text-intro-bottom p{grid-row:1;font-size:14px}.text-work-link{font-size:12px}.home-page .work-list{padding-top:40px}.text-intro-light{inset:65px -20px 0}.contents-mobile summary{min-height:40px}}
@media(prefers-reduced-motion:reduce){.headline-line>span,.headline-line .headline-accent,.text-intro-bottom,.sticky-back:hover .back-arrow,.sticky-back:focus-visible .back-arrow{animation:none}.back-arrow,.contents-mobile .contents-chevron,.text-work-link svg{transition:none}.text-work-link:hover svg{transform:none}}

/* Keep social and contact links together in the homepage navigation. */
.header-linkedin{font-size:15px;white-space:nowrap;color:var(--muted);transition:color .2s ease}.header-linkedin:hover,.header-linkedin:focus-visible{color:var(--ink)}
@media(max-width:1000px){.header-linkedin{display:none}}


/* Fit enlarged artwork inside the viewport, with a separate close-button row. */
/* Centre the image-sized dialog; float controls above its frame. */
#image-viewer{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:94vw;max-height:calc(100dvh - 150px);min-height:0;padding:8px;overflow:visible;box-sizing:border-box;background:#171b21;border:1px solid #ffffff20;border-radius:14px;box-shadow:0 24px 100px #0008}
#image-viewer[open]{display:block}
#image-viewer::backdrop{background:#090c12dc;backdrop-filter:blur(10px)}
#image-viewer .viewer-toolbar{position:absolute;bottom:calc(100% + 12px);right:0;display:flex;justify-content:flex-end;align-items:center;gap:10px;width:max-content}
#image-viewer .viewer-toolbar button{position:static;display:inline-flex;align-items:center;min-height:44px;padding:10px 17px;border:1px solid #ffffff25;border-radius:30px;background:#1d232c;color:#c3ceda;font:inherit;font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s}
#image-viewer .viewer-toolbar button:hover{background:#262e39;border-color:#ffffff50}
#image-viewer .viewer-toolbar button:focus-visible{outline:2px solid #b7d4e8;outline-offset:4px}
#image-viewer .viewer-stage{overflow:hidden;min-width:0;min-height:0;border-radius:6px;max-width:100%}
#image-viewer.is-zoomed .viewer-stage{overflow:auto;overscroll-behavior:contain}
#image-viewer #viewer-image{display:block;max-width:none;max-height:none;margin:0;object-fit:contain;border-radius:0}
@media(prefers-reduced-motion:reduce){#image-viewer .viewer-toolbar button{transition:none}}

.work-app .app-home-art,.work-soccer .work-card-art{height:auto;aspect-ratio:8 / 5;background:#111}.work-app .app-home-art img,.work-soccer .work-card-art img{object-fit:contain}

.work-card-foot .project-cta{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:#c3ceda}
.project-cta svg{display:block;flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .project-cta svg,.work-card:focus-visible .project-cta svg{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.project-cta svg{transition:none}.work-card:hover .project-cta svg,.work-card:focus-visible .project-cta svg{transform:none}}

/* Research evidence is grouped around decisions, with readable mobile artefacts. */
.case-evidence{padding-top:72px;scroll-margin-top:90px}
.case-evidence+.case-evidence{margin-top:64px;border-top:1px solid var(--line)}
.evidence-lead{max-width:820px;font-size:18px;line-height:1.8;margin-top:24px}
.insight-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0}
.insight-cards.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.insight-cards article{padding:28px;background:#1c2129;border:1px solid #ffffff12;border-radius:14px}
.insight-cards article>span,.system-rules article>span{font-size:10px;letter-spacing:1.3px;color:#9fb8cb}
.insight-cards h3,.system-rules h3{font-size:23px;margin:14px 0;line-height:1.35}
.insight-cards p,.system-rules p{font-size:15px;line-height:1.8}
.insight-cards dl{margin:24px 0}.insight-cards dt{font-size:12px;color:#d2dce6;margin:16px 0 6px}.insight-cards dd{font-size:15px;color:#9ba9b8}
.evidence-link{display:inline-block;font-size:13px;color:#c0d6e7;border-bottom:1px solid #ffffff30;padding:8px 0}
.evidence-wide{margin:36px 0}.evidence-wide img{width:100%;height:auto;border-radius:10px}
.case-evidence .evidence-grid{margin:32px 0;align-items:start}.case-evidence .evidence-grid img{width:100%;height:auto;max-height:480px;object-fit:contain;background:#20242a;border-radius:10px}

.evidence-subhead{margin:44px 0 18px;font-size:27px}
.system-rules{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:32px}
.button-examples{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}.button-examples span{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;background:#e9edf1;color:#182029;border-radius:5px;font-size:12px;height:60px}.button-examples span:nth-child(2){height:50px;background:#c4d0da}.button-examples span:nth-child(3){height:40px;background:transparent;border:1px solid #65717f;color:#d0dbe5}
.survey-summary{display:grid;grid-template-columns:1fr 1.3fr;gap:50px;margin:44px 0}.survey-summary h3{font-size:32px;line-height:1.3;margin:16px 0}.survey-summary .small{margin-top:20px}
.survey-bars>div{position:relative;display:flex;justify-content:space-between;gap:20px;padding:14px 0 20px;margin-bottom:12px;font-size:14px}.survey-bars>div:after{content:'';position:absolute;bottom:0;left:0;width:var(--share);height:4px;background:#92b4d0;border-radius:3px}.survey-bars b{font-weight:500;color:#c8deee}.survey-bars span{color:#aebcca}
@media(min-width:1500px){.section-nav>div{max-height:calc(100dvh - 140px);overflow-y:auto}}
@media(max-width:800px){.insight-cards,.insight-cards.two-up,.system-rules,.survey-summary{grid-template-columns:1fr;gap:22px}.case-evidence{padding-top:48px}.case-evidence+.case-evidence{margin-top:44px}.insight-cards article{padding:23px}.evidence-lead{font-size:16px}.case-evidence .evidence-grid{grid-template-columns:1fr;gap:28px}.survey-bars>div{font-size:13px}}

/* One consistent frame for sketches, flows, wireframes and finished UI. */
.case-page .artifact-frame{display:flex;align-items:center;justify-content:center;padding:8px;border:1px solid #ffffff20;border-radius:14px;background:#171b21;overflow:hidden}
.case-page .artifact-frame img,.case-page .evidence-grid figure:nth-child(2) .artifact-frame img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;padding:0;border:0;border-radius:6px;background:transparent}
.case-page .evidence-grid .artifact-frame{aspect-ratio:4/3}
.case-page .evidence-grid .artifact-frame img{width:100%;height:100%;max-height:100%;object-fit:contain}
.case-page .review-evidence .artifact-frame{aspect-ratio:auto}
.case-page .decision-visual{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}

.persona-navigation{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:30px}.persona-navigation p{font-size:13px}.persona-navigation>div{display:flex;gap:10px}
.persona-navigation button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff24;background:#202630;color:#d0dce7;font-size:22px;cursor:pointer}.persona-navigation button:hover{background:#303a46}.persona-navigation button:disabled{opacity:.35;cursor:default}
.persona-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:24px 0 18px;scrollbar-width:thin;scrollbar-color:#64798c #202630}
.persona-card{flex:0 0 43%;min-width:0;scroll-snap-align:start;padding:30px;border:1px solid #ffffff20;border-radius:14px;background:#1c2129;display:flex;flex-direction:column}
.persona-number{font-size:11px;letter-spacing:1px;color:#9fb8cb}.persona-card h3{font-size:27px;line-height:1.25;margin:18px 0}.persona-card .persona-job{font-size:18px;line-height:1.65;color:#d1dce6}.persona-card dl{margin:24px 0}.persona-card dt{font-size:12px;color:#d1dce6;margin:16px 0 6px}.persona-card dd{font-size:15px;line-height:1.7;color:#98a7b7}.persona-card .evidence-link{align-self:flex-start;margin-top:auto}
.persona-track:focus-visible,.persona-navigation button:focus-visible{outline:2px solid #b7d4e8;outline-offset:4px}
@media(max-width:800px){.persona-card{flex-basis:86%;padding:24px}.persona-track{gap:16px}.persona-card h3{font-size:25px}.persona-card .persona-job{font-size:16px}.case-page .artifact-frame{padding:8px}.persona-navigation{gap:16px}}
.ownership-summary{border-top:1px solid var(--line);padding-top:36px;margin-top:38px}.ownership-summary>h3{font-size:28px;margin-bottom:20px}.ownership-summary>p:not(.subsection-label){max-width:850px;font-size:17px;line-height:1.8}.ownership-points{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:28px}.ownership-points b{font-weight:500;color:#d0dce8}.ownership-points p{font-size:14px;line-height:1.8;margin-top:10px}@media(max-width:800px){.ownership-points{grid-template-columns:1fr;gap:20px}}

/* Final rhythm and authentic app CTA specimens. */
#approach .timeline{margin-bottom:0}.persona-track{max-width:none;padding-right:24px;box-sizing:border-box}.persona-card{flex-basis:clamp(300px,32vw,500px)}
#final-designs .final-designs-intro{margin:24px 0 36px}.case-page #final-designs figure{margin:0}

.button-examples{display:grid;grid-template-columns:1fr;gap:24px;padding:26px;background:#f4f4f4;border-radius:12px}
.cta-specimen{display:flex;flex-direction:column;gap:10px}.button-examples .cta-specimen .app-cta{height:var(--cta-height);background:#000;color:#fff;border:0;border-radius:100px;font-family:"neue-haas-grotesk-display",Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:.5px;width:100%;padding:0 24px}
.cta-specimen:nth-child(2){width:80%}.cta-specimen:nth-child(3){width:60%}.button-examples .cta-specimen:nth-child(2) .app-cta{font-size:15px}.button-examples .cta-specimen:nth-child(3) .app-cta{font-size:13px}
.survey-open{background:none;border-top:0;border-left:0;border-right:0;font-family:inherit;cursor:pointer}
#survey-viewer{width:min(900px,94vw);max-height:90vh;max-height:90dvh;padding:32px;border:1px solid #ffffff24;border-radius:20px;background:#171c23;color:#dce5ed;overflow:auto}
#survey-viewer::backdrop{background:#090c12dc;backdrop-filter:blur(10px)}.survey-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.survey-toolbar>span{font-size:10px;letter-spacing:1px;color:#9caebf}
#survey-viewer button{position:static;font-family:inherit;cursor:pointer}#survey-viewer .survey-close{border:1px solid #ffffff24;border-radius:30px;background:#202630;color:#d0dce7;min-height:44px;white-space:nowrap}
#survey-viewer h2{font-size:32px;margin-bottom:18px}#survey-viewer p:not(.small){font-size:15px;line-height:1.7}.survey-explorer{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:30px;margin:32px 0}
.survey-ring{position:relative;max-width:300px;width:100%;margin:auto}.survey-ring svg{display:block;width:100%;height:auto}.survey-readout{position:absolute;inset:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.survey-readout strong{font-size:36px;font-weight:500}.survey-readout span{font-size:12px;line-height:1.4;margin-top:8px;color:#a6b6c6}
#survey-viewer .survey-options button{display:flex;gap:12px;align-items:center;text-align:left;width:100%;min-height:54px;padding:14px 12px;margin:5px 0;border:1px solid transparent;border-radius:9px;background:transparent;color:#b4c3d1;font-size:13px;line-height:1.5}.survey-options i{width:9px;height:9px;border-radius:50%;flex-shrink:0}.survey-options b{margin-left:auto;color:#e0eaf3}.survey-options span{flex:1}#survey-viewer .survey-options button:hover,#survey-viewer .survey-options button[aria-pressed=true]{border-color:#ffffff25;background:#242d38}#survey-viewer button:focus-visible{outline:2px solid #9fbed7;outline-offset:3px}
@media(max-width:700px){.persona-card{flex-basis:82vw}#survey-viewer{padding:20px}.survey-explorer{grid-template-columns:1fr;gap:18px}.survey-ring{max-width:220px}#survey-viewer h2{font-size:27px}.survey-toolbar>span{font-size:9px}}
/* Live examples retain the original action hierarchy. */
.button-examples .cta-specimen{width:100%}.button-examples .cta-specimen:has([data-demo-action="1"]){width:80%}.button-examples .cta-specimen:has([data-demo-action="2"]){width:60%}
.button-examples .app-cta{cursor:pointer;transition:background .2s,transform .15s}.button-examples .app-cta:hover{background:#5e5e5e!important}.button-examples .app-cta:active{transform:scale(.98)}
.button-examples[data-state="outlined"] .app-cta{background:transparent!important;border:1px solid #000!important;color:#000!important}.button-examples .app-cta:disabled{background:#d1d1d1!important;color:#777!important;cursor:not-allowed;transform:none}
.demo-state-control{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#333;font-size:13px}.demo-state-control select{background:#fff;color:#111;border:1px solid #aaa;border-radius:6px;padding:10px;font:inherit}.button-examples .demo-status{font-size:13px;color:#454545;margin:0;min-height:40px}.demo-reset{justify-self:start;background:none;border:0;border-bottom:1px solid #aaa;padding:6px 0;color:#333;cursor:pointer;font:inherit;font-size:12px}
.interaction-lab{grid-column:1/-1;margin-top:28px;padding:30px;border:1px solid #ffffff20;border-radius:14px;background:#1b222b}.lab-heading h3{margin:16px 0}.lab-heading p{max-width:700px;font-size:15px}.sport-options{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.sport-options button{background:transparent;border:1px solid #536171;border-radius:30px;padding:12px 20px;color:#bdcad7;cursor:pointer;font:inherit;font-size:14px}.sport-options button[aria-pressed="true"]{background:#d7e5ef;color:#17212a;border-color:#d7e5ef}.discovery-preview{padding:28px;border-radius:12px;background:linear-gradient(130deg,#253e53,#222a35)}.preview-eyebrow{font-size:10px;letter-spacing:1.4px;color:#9bc7e7}.discovery-preview h3{margin:20px 0 14px}.preview-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.preview-tags span{padding:8px 12px;background:#ffffff0d;border-radius:6px;font-size:12px;color:#c9d7e3}.interaction-lab>.small{margin-top:18px}.interaction-lab button:focus-visible,.button-examples button:focus-visible,.button-examples select:focus-visible{outline:3px solid #548bb4;outline-offset:4px}
@media(max-width:700px){.interaction-lab{padding:20px}.demo-state-control{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.button-examples .app-cta{transition:none}.button-examples .app-cta:active{transform:none}}
.button-examples .cta-specimen .app-cta[data-demo-action="0"]{font-size:16px}.button-examples .cta-specimen .app-cta[data-demo-action="1"]{font-size:15px}.button-examples .cta-specimen .app-cta[data-demo-action="2"]{font-size:13px}

/* Keep feedback groups evenly spaced without stacking section margins. */
#customer-feedback{padding-top:80px;padding-bottom:0}
#customer-feedback>.subsection-label{margin-bottom:20px}
#customer-feedback>.evidence-lead{margin-top:24px}
#customer-feedback .review-evidence{margin:36px 0 0;gap:28px}
#customer-feedback .survey-summary{margin:48px 0 0;padding-top:40px;border-top:1px solid var(--line);align-items:start}
#customer-feedback .survey-summary .subsection-label{display:block;margin:0 0 16px}
#customer-feedback .survey-summary h3{margin:0 0 20px}
#customer-feedback .survey-bars>div:first-child{padding-top:0}
#customer-feedback .survey-open{margin-top:12px}
#customer-feedback+#learning{padding-top:80px}
@media(max-width:800px){#customer-feedback{padding-top:56px}#customer-feedback .review-evidence{margin-top:28px;gap:28px}#customer-feedback .survey-summary{margin-top:36px;padding-top:32px;gap:28px}#customer-feedback+#learning{padding-top:56px}}

/* Compact horizontal CTA playground, aligned with the case-study palette. */
.button-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;padding:24px;background:#161b22;border:1px solid #ffffff16;align-items:end}
.button-examples .demo-state-control{grid-column:1/-1;flex-direction:row;align-items:center;color:#b9c7d5}
.button-examples .demo-state-control select{background:#242c36;border-color:#46515e;color:#d8e3ec}
.button-examples .cta-specimen,.button-examples .cta-specimen:has([data-demo-action="1"]),.button-examples .cta-specimen:has([data-demo-action="2"]){width:100%;min-width:0}
.button-examples .cta-specimen .app-cta{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;padding:0 14px;white-space:nowrap}

.button-examples .demo-status{grid-column:1/-1;color:#aabac9;min-height:0;margin:0;padding-top:18px;border-top:1px solid #ffffff16}
.button-examples .demo-reset{grid-column:1/-1;color:#bdcede;border-color:#ffffff35}
.button-examples[data-state="outlined"] .app-cta{border-color:#c8d4df!important;color:#e4ecf3!important}
@media(max-width:700px){.button-examples{grid-template-columns:1fr;padding:20px;gap:20px}.button-examples .demo-state-control{flex-wrap:wrap}.button-examples .cta-specimen{max-width:none}}
.personalised-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.feed-item{padding:22px;border:1px solid #ffffff20;border-radius:10px;background:#1c2e3e}.feed-item[data-feed-sport="Running"]{background:#293638}.feed-item[data-feed-sport="Tennis"]{background:#303048}.feed-item>span{font-size:10px;letter-spacing:.7px;color:#b7cbdb}.feed-item h4{font-size:18px;font-weight:500;line-height:1.4;margin:16px 0 0;color:#e0e9f1}@media(max-width:700px){.personalised-feed{grid-template-columns:1fr}}

/* Staggered block entrances; layout and scrolling stay in their natural flow. */
.block-entry{opacity:0;translate:0 30px}
.block-entry.block-visible{animation:block-arrive .85s cubic-bezier(.2,.7,.2,1) var(--entry-delay,0ms) both}
@keyframes block-arrive{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.block-entry{translate:0 18px}@keyframes block-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){.block-entry,.block-entry.block-visible{opacity:1;translate:none;animation:none}}
@media print{.block-entry,.block-entry.block-visible{opacity:1;translate:none;animation:none}}

/* About: an editorial companion to the work and case-study pages. */
.about-page{background:var(--page-background)}.about-main{overflow:hidden;background:radial-gradient(ellipse 75% 650px at 65% 0,#294a6638,transparent 85%)}
.about-intro{padding-top:165px;padding-bottom:56px}.about-intro h1{font-size:clamp(54px,7vw,96px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:30px 0 36px}.about-intro h1 .headline-line:last-child{color:#a9c5db}
.about-intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}.about-intro-bottom>p{max-width:740px;font-size:21px;line-height:1.7;color:#b0bcc9}.about-intro-bottom>a{flex-shrink:0;white-space:nowrap}
.about-portrait img{width:100%;height:auto;aspect-ratio:3.2;object-fit:cover;border-radius:14px}
.about-story,.about-story-inner{display:grid;grid-template-columns:1fr 1.35fr;gap:80px}.about-story{padding:90px 0;border-bottom:1px solid var(--line)}.about-section-heading h2{font-size:clamp(30px,3vw,42px);line-height:1.25;letter-spacing:-.025em;margin-top:24px}.about-copy p{font-size:17px;line-height:1.85}.about-copy .about-lead{font-size:24px;line-height:1.55;color:#d0dae4}.about-copy p+p{margin-top:24px}
.about-scale{padding:70px 0 90px;border-bottom:1px solid var(--line)}.about-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:64px}.about-metrics>div{border-left:1px solid #ffffff24;padding-left:26px}.about-metrics strong{display:block;font-size:clamp(36px,4vw,55px);font-weight:400;letter-spacing:-.04em;color:#b8d2e6;line-height:1.25}.about-metrics span{display:block;color:#91a1b2;font-size:13px;line-height:1.6;margin-top:16px}.about-story-inner h2{font-size:36px;line-height:1.25;letter-spacing:-.025em}
.about-experience{padding:90px 0 30px;scroll-margin-top:90px}.experience-list{margin-top:44px}.experience-list article{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding:34px 0;border-top:1px solid var(--line)}.experience-date{font-size:13px;color:#b2c2d1;line-height:1.6}.experience-date span{display:block;color:#778da1;margin-top:10px}.experience-list h3{font-size:26px;line-height:1.4;font-weight:450;margin-bottom:16px}.experience-list h3 span{display:block;font-size:17px;color:#9db4c7;font-weight:400;margin-top:4px}.experience-list p{font-size:16px;line-height:1.8;max-width:720px}.about-close>div{display:flex;gap:32px;flex-wrap:wrap}
@media(max-width:800px){.about-intro{padding-top:125px;padding-bottom:36px}.about-intro h1{font-size:clamp(44px,8vw,66px)}.about-intro-bottom{display:block}.about-intro-bottom>p{font-size:18px}.about-intro-bottom>a{margin-top:20px}.about-portrait img{aspect-ratio:1.6;object-position:50% 45%}.about-story,.about-story-inner{grid-template-columns:1fr;gap:30px}.about-story{padding:56px 0}.about-scale{padding:48px 0 56px}.about-metrics{gap:16px;margin-bottom:40px}.about-metrics>div{padding-left:12px}.about-metrics strong{font-size:32px}.about-metrics span{font-size:11px}.about-copy p{font-size:16px}.about-experience{padding-top:56px}.experience-list article{grid-template-columns:1fr;gap:20px}.experience-list h3{font-size:24px}.experience-date span{display:inline;margin-left:16px}}

/* Scannable About content: capability cards and a focused application toolkit. */
.about-capabilities,.about-tools{padding:72px 0;border-bottom:1px solid var(--line)}
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}.capability-grid article{padding:28px;background:#1b2129;border:1px solid #ffffff16;border-radius:14px}.capability-grid article>span,.tool-card>div>span{font-size:10px;letter-spacing:1.2px;color:#93adc2}.capability-grid h3{font-size:25px;line-height:1.3;margin:20px 0 16px}.capability-grid p{font-size:15px;line-height:1.75}.capability-grid ul{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #ffffff15}.capability-grid li{font-size:13px;color:#bac8d4;line-height:1.6;margin:8px 0}
.tools-heading{display:flex;justify-content:space-between;align-items:end;gap:32px}.tools-heading>p{font-size:14px;color:#8d9fb0}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}.tool-card{display:flex;align-items:start;gap:18px;padding:24px;border:1px solid #ffffff16;background:#151a20;border-radius:12px;transition:border-color .25s,background .25s}.tool-card:hover{background:#1b2530;border-color:#7999b34d}.tool-logo{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;border:1px solid #ffffff16;border-radius:12px;background:#242e39}.tool-logo img{width:28px;height:28px;filter:invert(1);opacity:.88}.tool-card h3{font-size:19px;letter-spacing:-.02em;margin:8px 0;line-height:1.3}.tool-card p{font-size:13px;line-height:1.65;color:#90a3b5}.tool-support{margin-top:26px;font-size:13px;line-height:1.8;color:#8d9fb0;max-width:760px}.tool-support strong{font-weight:400;color:#c2ced9}
@media(max-width:1000px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capability-grid{gap:16px}.capability-grid article{padding:22px}}
@media(max-width:700px){.about-capabilities,.about-tools{padding:48px 0}.capability-grid,.tool-grid{grid-template-columns:1fr;gap:16px}.tools-heading{display:block}.tools-heading>p{margin-top:18px}.tool-card{padding:22px}.capability-grid h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.tool-card{transition:none}}

/* Consistent toolkit hierarchy: logo and category, then name and description. */
.tool-grid .tool-card{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:26px}
.tool-card-heading{display:flex;align-items:center;gap:16px;min-height:52px;margin-bottom:22px}
.tool-card .tool-category{font-size:10px;line-height:1.5;letter-spacing:1.2px;color:#93adc2}
.tool-grid .tool-card h3{margin:0 0 12px;font-size:20px;line-height:1.4}
.tool-grid .tool-card>p{margin:0;font-size:14px;line-height:1.7}
.tool-logo img{filter:brightness(0) invert(1)}
.about-intro-bottom>p{max-width:800px}

.tool-logo img.bloomreach-logo{filter:none;opacity:.88;width:28px;height:28px}

/* Coordinated page navigation for both static hosting and file previews. */
@view-transition{navigation:auto}
.header{view-transition-name:none}.nav-indicator{view-transition-name:nav-indicator;position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 14px)/2);background:#ffffff13;border-radius:30px;box-shadow:inset 0 1px #ffffff14;pointer-events:none;transition:transform .38s cubic-bezier(.22,.7,.2,1)}
.main-nav a{position:relative;z-index:1;text-align:center;flex:1;min-width:78px}.main-nav a[aria-current]{background:transparent;box-shadow:none}.about-page .nav-indicator{transform:translateX(calc(100% + 4px))}
html[data-next-page="about"] .nav-indicator{transform:translateX(calc(100% + 4px))}html[data-next-page="work"] .nav-indicator{transform:translateX(0)}
html[data-page-exit] main,html[data-page-exit] footer{transition:opacity .22s ease,translate .28s ease;opacity:0;translate:0 -12px}
html[data-page-exit="open-project"] .header{transform:translateY(-115%);opacity:0}
html[data-page-exit="close-project"] .sticky-back{translate:-14px 0;opacity:0}
html[data-page-entry] main{animation:navigation-content-in .5s cubic-bezier(.2,.7,.2,1) both}
html[data-page-entry="close-project"] .header{animation:navigation-header-in .55s cubic-bezier(.2,.7,.2,1) both}
html[data-page-entry="open-project"] .sticky-back{animation:navigation-back-in .45s ease both}
html[data-page-entry] .case-cover{animation:none}
@keyframes navigation-content-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:none}}
@keyframes navigation-content-out{to{opacity:0;translate:0 -12px}}
@keyframes navigation-header-in{from{transform:translateY(-115%)}to{transform:none}}
@keyframes navigation-header-out{to{opacity:0;transform:translateY(-115%)}}
@keyframes navigation-back-in{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
::view-transition-old(root){animation:navigation-content-out .22s ease both}
::view-transition-new(root){animation:navigation-content-in .45s cubic-bezier(.2,.7,.2,1) both}
::view-transition-group(site-header),::view-transition-group(nav-indicator){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
html:active-view-transition .header,html:active-view-transition main{animation:none}
html[data-page-entry="open-project"]::view-transition-old(site-header){animation:navigation-header-out .4s ease both}
html[data-page-entry="close-project"]::view-transition-new(site-header){animation:navigation-header-in .5s ease both}
@media(max-width:700px){.main-nav a{min-width:60px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.nav-indicator{transition:none}html[data-page-entry] main,html[data-page-entry] .header,html[data-page-entry] .sticky-back{animation:none}html[data-page-exit] main,html[data-page-exit] footer,html[data-page-exit] .header,html[data-page-exit] .sticky-back{opacity:1;translate:none;transform:none;transition:none}}

/* One soft selection highlight; hovering never paints a second pill. */
.main-nav{overflow:visible;background:#ffffff09;border-color:#ffffff24;box-shadow:0 8px 30px #0003,inset 0 1px #ffffff0b}
.main-nav a,.main-nav a:hover,.main-nav a[aria-current],.main-nav a:focus-visible{background:transparent;box-shadow:none}
.main-nav a:hover{color:#fff}
.nav-indicator{background:linear-gradient(135deg,#ffffff0e,#ffffff06);box-shadow:none}
.nav-indicator:before{content:'';position:absolute;top:-9px;left:calc(50% - 8px);width:16px;height:2px;border-radius:4px 4px 0 0;background:#e5e9ee;box-shadow:0 0 16px 5px #dce5ef25}
.nav-indicator:after{content:'';position:absolute;inset:-8px -10px -2px;background:radial-gradient(ellipse at 50% 0,#e2e8ef16,transparent 72%);border-radius:30px;pointer-events:none}

/* A single entrance, after layout/scroll restoration, prevents content flashing. */
@view-transition{navigation:none}
html{background:var(--page-background)}
html.navigation-preparing main,html.navigation-preparing footer{visibility:hidden;animation:none}
html.navigation-preparing[data-page-entry="close-project"] .header,html.navigation-preparing[data-page-entry="open-project"] .sticky-back{visibility:hidden;animation:none}
html.navigation-ready[data-page-entry] main{animation:navigation-content-in .45s cubic-bezier(.2,.7,.2,1) both}
html.navigation-arrival .case-cover,html.navigation-arrival .headline-line>span,html.navigation-arrival .headline-line .headline-accent,html.navigation-arrival .text-intro-bottom{animation:none}
html.navigation-arrival .entry-settled{opacity:1;translate:none;animation:none}
@media(prefers-reduced-motion:reduce){html.navigation-ready[data-page-entry] main{animation:none}}

/* Contents is available on entry, independent of the page scroll threshold. */
@media(max-width:1499px){.case-page .contents-mobile{opacity:1;visibility:visible;translate:none}}

/* Reference contents timing: 1500ms delay, 800ms ease-out quart fade. */
.case-page .section-nav,.case-page .contents-mobile{opacity:0;translate:none;transition:none}
html.contents-reveal .case-page .section-nav,html.contents-reveal .case-page .contents-mobile{animation:contents-fade-in .8s cubic-bezier(.165,.84,.44,1) 1.5s both}
@keyframes contents-fade-in{from{opacity:0}to{opacity:1}}
html.contents-settled .case-page .section-nav,html.contents-settled .case-page .contents-mobile{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.case-page .section-nav,.case-page .contents-mobile,html.contents-reveal .case-page .section-nav,html.contents-reveal .case-page .contents-mobile{animation:none;opacity:1}}
@media print{.case-page .section-nav,.case-page .contents-mobile{display:none}}

/* Frosted glass navigation, with one selected-tab highlight. */
.main-nav{background:linear-gradient(145deg,#ffffff14,#ffffff05),#1b2028b8;-webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);border:1px solid #ffffff30;box-shadow:inset 0 1px 0 #ffffff29,inset 0 -1px 0 #ffffff08,0 8px 28px #0004,0 1px 3px #0003}
.main-nav:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff0c,transparent 35%,transparent 70%,#ffffff04)}
.main-nav .nav-indicator{background:linear-gradient(145deg,#ffffff17,#ffffff08);box-shadow:inset 0 1px 0 #ffffff14}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.main-nav{background:#242a33f2}}

/* Let the switcher sample actual page content instead of an opaque header layer. */
.home-page .header,.about-page .header{background:transparent}
.main-nav{background:rgba(116,135,151,.24);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-color:#dce7ef30;box-shadow:inset 0 1px 0 #ffffff18,0 8px 24px #0002}
.main-nav:after{background:linear-gradient(145deg,#ffffff08,transparent 55%)}
.main-nav .nav-indicator{background:#d4e1ec12;box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.main-nav{background:#303b46ed}}

/* Requested glass blur and a flush active-tab accent. */
.main-nav{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.nav-indicator:before{top:-7px;left:calc(50% - 10px);width:20px;height:2px}

/* The glass pane must sample the page, not a transition-isolated header. */
.header{view-transition-name:none;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;will-change:auto}
.main-nav{isolation:auto;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.main-nav:after{z-index:-1;inset:0;border-radius:inherit;background:rgba(116,135,151,.24);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.main-nav:after{background:#303b46ed}}

/* SoccerBible uses the shared case-study blocks with its homepage purple accent. */
.soccerbible-page{--project-accent:169,107,222;--blue:#c99fed;--line:#ffffff18}
.soccerbible-page .case-hero{background:radial-gradient(ellipse 63% 36% at 50% 5%,rgba(var(--project-accent),.24),transparent 80%),radial-gradient(ellipse 35% 27% at 65% 0,#784ca81c,transparent 85%)}
.soccerbible-page .case-hero:before{background:rgb(var(--project-accent))}
.soccerbible-page .cover-media{max-width:1040px}.soccerbible-page .cover-media img{height:auto;max-height:none;object-fit:contain;border-radius:12px}
.soccerbible-page .section-label,.soccerbible-page .subsection-label,.soccerbible-page .cover-label,.soccerbible-page .cover-eyebrow,.soccerbible-page .insight-cards article>span,.soccerbible-page .timeline .stage,.soccerbible-page .preview-eyebrow,.soccerbible-page .takeaway>span{color:#c99fed}
.soccerbible-page .cover-summary>a,.soccerbible-page .footer-mail{color:#ddc8ee}
.soccerbible-page .reading-progress{background:rgb(var(--project-accent))}.soccerbible-page .section-nav a[aria-current]:before{background:#c99fed}.soccerbible-page .contents-mobile nav a[aria-current]{color:#eadcf6;background:#a96bde18}
.soccerbible-page .section-nav a[aria-current],.soccerbible-page .section-nav a:hover{color:#e1c9f4}
.soccerbible-page .sb-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.soccerbible-page .sb-phone-grid{margin-top:36px}.soccerbible-page .sb-phone-grid .artifact-frame{aspect-ratio:4/5}
.soccerbible-page .sb-taxonomy{margin-top:44px}.soccerbible-page .discovery-preview{background:linear-gradient(130deg,#39294c,#241e30)}.soccerbible-page .sport-options button[aria-pressed="true"]{background:#dec4f3;border-color:#dec4f3;color:#25162f}.soccerbible-page .sport-options button{border-color:#735986;color:#d7c3e7}
.soccerbible-page .takeaway{background:linear-gradient(135deg,#30233e,#1c1923)}.soccerbible-page .takeaway em{color:#e1c6f5}.soccerbible-page .takeaway>div{color:#b8a7c5}
.soccerbible-page a:focus-visible,.soccerbible-page button:focus-visible,.soccerbible-page summary:focus-visible{outline-color:#c99fed}
@media(max-width:700px){.soccerbible-page .sb-insights{grid-template-columns:1fr}.soccerbible-page .cover-media{max-width:none}.soccerbible-page .cover-media img{max-height:none}}

/* Scrollable browser artwork: fixed chrome, full-height screenshot inside. */
.browser-mockup{display:flex;flex-direction:column;aspect-ratio:1203 / 753;overflow:hidden;border:1px solid #ffffff24;border-radius:12px;background:#17171d;box-shadow:0 18px 44px #0003}
.browser-chrome{display:flex;align-items:center;justify-content:space-between;gap:20px;height:48px;flex:0 0 48px;padding:0 18px;background:#25242c;border-bottom:1px solid #ffffff14}
.browser-dots{display:flex;gap:7px;width:54px}.browser-dots i{width:9px;height:9px;border-radius:50%;background:#68636f}.browser-address{background:#16151b;color:#a89bb3;border-radius:6px;padding:6px 36px;max-width:65%;font-size:12px;line-height:1.5}.browser-menu{width:54px;text-align:right;color:#aaa0b3}
.browser-viewport{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a96bde #201b27;touch-action:pan-y}
.soccerbible-page .browser-viewport img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;border:0;border-radius:0;margin:0;padding:0}
.browser-viewport:focus-visible{outline:2px solid #c99fed;outline-offset:-3px}
.browser-evidence figcaption{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}.browser-evidence figcaption a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.browser-mockup{aspect-ratio:4 / 3}.browser-chrome{height:36px;flex-basis:36px;padding:0 12px;gap:12px}.browser-dots{gap:5px;width:38px}.browser-dots i{width:7px;height:7px}.browser-address{font-size:10px;padding:3px 16px}.browser-menu{width:20px}.browser-evidence figcaption{display:flex;flex-direction:column;gap:8px}}

/* Broad moving ribbons keep the aurora visible above the static ambient light. */
.case-page .case-hero{--aurora-rgb:65,153,213}
.soccerbible-page .case-hero{--aurora-rgb:var(--project-accent)}
.case-page .case-hero:before{
  top:-130px;left:0;right:0;height:540px;
  background:radial-gradient(ellipse at 30% 35%,rgba(var(--aurora-rgb),.85),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--aurora-rgb),.55),transparent 55%);
  filter:blur(80px);transform-origin:50% 0;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,rgba(0,0,0,.75) 40%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 15%,rgba(0,0,0,.75) 40%,transparent 72%);
  animation:project-aurora 9s ease-in-out infinite;
}
.text-intro-light{
  background:radial-gradient(ellipse at 30% 35%,#367ab570,transparent 60%),radial-gradient(ellipse at 75% 20%,#367ab548,transparent 55%);
  transform-origin:50% 35%;animation:intro-aurora 10s ease-in-out infinite;
}
@keyframes project-aurora{
  0%,100%{transform:translate3d(-7%,-5%,0) scale(.9,.8);opacity:.16}
  50%{transform:translate3d(8%,8%,0) scale(1.1,1.2);opacity:.34}
}
@keyframes intro-aurora{
  0%,100%{transform:translate3d(-5%,0,0) scale(.95,.9);opacity:.3}
  50%{transform:translate3d(6%,3%,0) scale(1.08,1.1);opacity:.6}
}
@media(max-width:700px){.case-page .case-hero:before{top:-80px;height:380px;filter:blur(45px)}}
@media(prefers-reduced-motion:reduce){
  .case-page .case-hero:before,.text-intro-light{animation:none;transform:none;opacity:.2}
}

/* Fine monochrome dithering softens visible colour steps on dark displays.
   Separate from the blurred light so the grain stays fine and stationary. */
.case-page .case-hero:after,.text-intro:after{
  content:'';position:absolute;inset:0 0 auto;height:650px;
  z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22%23808080%22%20filter%3D%22url%28%23grain%29%22%20d%3D%22M0%200h180v180H0z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;background-size:180px 180px;
  -webkit-mask-image:linear-gradient(#000 0%,#000 35%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 35%,transparent 100%);
}
.text-intro:after{
  left:-12%;right:-12%;height:100%;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 40%,#000 15%,rgba(0,0,0,.65) 50%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at 50% 40%,#000 15%,rgba(0,0,0,.65) 50%,transparent 100%);
}
@media(max-width:700px){.case-page .case-hero:after{height:440px}}

.persona-navigation button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
.persona-navigation button svg{display:block;width:24px;height:24px;flex-shrink:0}

/* Contain overflowing carousel cards without making the document scroll sideways. */
.case-page main{overflow-x:clip}
.persona-track{contain:inline-size;min-width:0;overscroll-behavior-x:contain}

.results-strip .metric-replay{display:block;appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;margin:0;cursor:pointer;border-radius:6px;transition:filter .25s}
.results-strip .metric-replay strong{font-variant-numeric:tabular-nums}
.results-strip .metric-replay:hover,.results-strip .metric-replay:focus-visible{filter:drop-shadow(0 0 14px #87bfe14d)}
.results-strip .metric-replay:focus-visible{outline:2px solid var(--blue);outline-offset:8px}
@media(prefers-reduced-motion:reduce){.results-strip .metric-replay{transition:none}}

/* Process animation decorates the connecting line, never conceals the copy. */
.process-timeline article,.process-timeline article.block-entry{opacity:1;translate:none;animation:none}
.process-timeline{position:relative}
.process-timeline article{--stage-delay:0s}
.process-timeline article:nth-child(2){--stage-delay:.55s}
.process-timeline article:nth-child(3){--stage-delay:1.1s}
.process-timeline article:after{content:'';position:absolute;left:0;top:-1px;width:calc(100% + 28px);height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;pointer-events:none}
.process-timeline article:last-child:after{width:100%}
.process-timeline.process-traced article:after{animation:trace-process .6s var(--stage-delay) ease-out both}
.process-timeline article:before{z-index:1;transition:box-shadow .3s,background .3s}
.process-timeline.process-traced article:before{animation:light-milestone .8s var(--stage-delay) ease-out both}
.process-timeline article:hover:before{background:var(--blue);box-shadow:0 0 0 5px #b5ccdc12,0 0 18px #b5ccdc66}

@keyframes trace-process{to{transform:scaleX(1)}}
@keyframes light-milestone{0%{box-shadow:0 0 0 0 #b5ccdc00}45%{box-shadow:0 0 0 7px #b5ccdc16,0 0 20px #b5ccdc66}100%{background:var(--blue);box-shadow:0 0 0 0 #b5ccdc00}}
@media(max-width:700px){.process-timeline article:after{width:100%}}
@media(prefers-reduced-motion:reduce){.process-timeline.process-traced article:after{animation:none;transform:scaleX(1)}.process-timeline.process-traced article:before{animation:none}.process-timeline article,.process-timeline article:before{transition:none}}

.survey-bars>div.survey-bar-ready:after{transform:scaleX(0);transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,1,.36,1) var(--bar-delay,0ms)}
.survey-bars>div.survey-bar-visible:after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.survey-bars>div.survey-bar-ready:after{transform:none;transition:none}}
@media print{.survey-bars>div.survey-bar-ready:after{transform:none;transition:none}}

.chart-card.downloads-ready .bar{transform:scaleY(0);transform-origin:center bottom;transition:transform 1.2s cubic-bezier(.22,1,.36,1) var(--column-delay,0ms)}
.chart-card.downloads-visible .bar{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.chart-card.downloads-ready .bar{transform:none;transition:none}}
@media print{.chart-card.downloads-ready .bar{transform:none;transition:none}}

/* Individual transparent mockups share one stage, with native swipe on mobile. */
.phone-gallery-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 8px;padding:32px 18px;border:1px solid #ffffff20;border-radius:14px;background:radial-gradient(ellipse at 50% 35%,#31526a35,transparent 75%),#1c2229;min-width:0}
.phone-gallery-item{display:flex;flex-direction:column;align-items:center;min-width:0;border-radius:8px;gap:10px}
.case-page #final-designs .phone-gallery-item img{display:block;width:100%;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.phone-gallery-item>span{font-size:11px;line-height:1.5;color:#b6c5d1;text-align:center}
.phone-gallery-item:focus-visible,.phone-gallery-track:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.phone-gallery-item:hover>span{color:#edf5fa}
.phone-swipe-hint{display:none}
@media(max-width:700px){
 .phone-gallery-track{display:flex;gap:8px;padding:24px 12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#7999b1 #1c2229;scroll-padding-inline:12px}
 .phone-gallery-item{flex:0 0 82%;scroll-snap-align:center}
 .phone-gallery-item>span{font-size:13px}
 .phone-swipe-hint{display:block;margin-top:8px}
}
@media print{.phone-gallery-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}.phone-swipe-hint{display:none}}

/* A kinetic line sculpture behind the homepage typography. */
.text-intro.has-ribbon .text-intro-light,.text-intro.has-ribbon:after{display:none}
.hero-ribbon{position:absolute;inset:0 -10% 0;width:120%;height:100%;z-index:-1;pointer-events:none;mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 35%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.35) 82%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 35%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.35) 82%,transparent 100%)}
.text-intro.has-ribbon h1{text-shadow:0 2px 18px #101114a6}
@media(max-width:700px){.hero-ribbon{opacity:.65}}

/* Extend the original artwork's sampled grey through the contain area. */
.case-page .evidence-grid figure:nth-child(2) .wireframe-matched-background img{
  background:#ebebeb;width:100%;height:100%;object-fit:cover;object-position:44% center;
}

.mobile-contact{display:none}
@media(max-width:700px){
 .home-page .header,.about-page .header{height:88px;padding:0 16px;gap:10px;background:transparent;border-radius:0;box-shadow:none}
 .header .wordmark{flex:1;min-width:0}
 .header .wordmark img{width:100px;max-width:100%;height:auto}
 .header .brand-role{display:none}
 .header .main-nav{position:relative;left:auto;transform:none;margin-left:0;flex:0 0 150px;width:150px;height:46px;gap:4px;padding:5px}
 .header .main-nav>a{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;padding:0;font-size:13px;line-height:1}
 .header .header-right{display:none}
 .mobile-contact{display:block;position:relative;flex:0 0 44px;margin:0;border:0}
 .mobile-contact summary{display:flex;align-items:center;justify-content:center;gap:0;line-height:1;width:44px;height:44px;padding:0;border:1px solid #ffffff24;border-radius:50%;background:#ffffff08;color:#e7ecf1;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);list-style:none;cursor:pointer}
 .mobile-contact summary::-webkit-details-marker{display:none}
 .mobile-contact summary svg{display:block;flex:0 0 22px;width:22px;height:22px;margin:0}
 .mobile-contact .contact-x,.mobile-contact[open] .contact-at{display:none}
 .mobile-contact[open] .contact-x{display:block}
 .contact-dropdown{position:absolute;right:0;top:58px;width:200px;padding:12px;border:1px solid #ffffff29;border-radius:18px;background:#30343acc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 16px 40px #0004;animation:contact-menu-in .2s ease-out}
 .contact-dropdown a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 12px;font-size:15px;color:#edf0f4;border-radius:9px}
 .contact-dropdown a:hover,.contact-dropdown a:focus-visible{background:#ffffff0b}
}
@keyframes contact-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.contact-dropdown{animation:none}}

/* Shared text-link spacing and arrow motion across navigation and contact links. */
a.animated-text-link,.home-close>a.animated-text-link{display:inline-flex;align-items:center;gap:8px}
.animated-text-link .link-arrow{display:block;flex:0 0 18px;width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.animated-text-link:hover .link-arrow,.animated-text-link:focus-visible .link-arrow{transform:translate(3px,-3px)}
.contact-dropdown a.animated-text-link{display:flex;justify-content:space-between}
@media(prefers-reduced-motion:reduce){.animated-text-link .link-arrow{transition:none}.animated-text-link:hover .link-arrow,.animated-text-link:focus-visible .link-arrow{transform:none}}

/* One colour response for all shared arrow links. */
a.animated-text-link{transition:color .25s ease}
a.animated-text-link:hover,a.animated-text-link:focus-visible{color:#fff}
@media(prefers-reduced-motion:reduce){a.animated-text-link{transition:none}}

/* Frosted lettering: translucent fill, crisp rim and a soft internal highlight. */
.text-intro .headline-line .headline-accent{
  color:#c6deec;
  background:linear-gradient(165deg,rgba(242,250,255,.94) 0%,rgba(219,238,252,.83) 38%,rgba(188,216,238,.72) 72%,rgba(225,241,253,.87) 100%);
  background-size:100% 100%;background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:0;
  text-shadow:0 1px 1px #ffffff12,0 0 12px #9dd3f01c,0 6px 24px #0003;
  animation:headline-rise 1.05s .24s cubic-bezier(.2,.7,.2,1) both;
}
@media(max-width:700px){.text-intro .headline-line .headline-accent{-webkit-text-stroke:0}}
@media(prefers-reduced-motion:reduce){.text-intro .headline-line .headline-accent{animation:none}}
@media(forced-colors:active){.text-intro .headline-line .headline-accent{background:none;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0;text-shadow:none}}

/* Keep the glass fill identical on first load and navigation return. */
.text-intro .headline-line .headline-accent{
 -webkit-text-stroke:0;text-shadow:none;filter:none;
}
@media(forced-colors:active){.text-intro .headline-line .headline-accent{filter:none}}

.site-arrow{display:inline-block;vertical-align:middle;flex:0 0 18px;width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
a.arrow-control,button.arrow-control{display:inline-flex;align-items:center;gap:8px}
.arrow-control:hover .arrow-down,.arrow-control:focus-visible .arrow-down{transform:translateY(3px)}
.arrow-control:hover .arrow-up,.arrow-control:focus-visible .arrow-up{transform:translateY(-3px)}
.arrow-control:hover .arrow-diagonal,.arrow-control:focus-visible .arrow-diagonal{transform:translate(3px,-3px)}
.arrow-control:hover .arrow-right,.arrow-control:focus-visible .arrow-right{transform:translateX(3px)}
.project-arrow .site-arrow{width:20px;height:20px}
@media(prefers-reduced-motion:reduce){.site-arrow{transition:none}.arrow-control:hover .site-arrow,.arrow-control:focus-visible .site-arrow{transform:none}}

/* Quieter ambient light for the SoccerBible cover. */
.soccerbible-page .case-hero:before{
 background:radial-gradient(ellipse at 30% 35%,rgba(var(--project-accent),.45),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--project-accent),.28),transparent 55%);
}

/* Nike Connected uses the shared editorial blocks with a muted sage accent. */
.nike-page{--project-accent:225,91,72;--section-heading-color:#e15b48;--blue:#f0a091;--line:#ffffff18}
.nike-page .case-hero{--aurora-rgb:225,91,72;background:radial-gradient(ellipse 63% 36% at 50% 5%,#e15b4826,transparent 80%)}
.nike-page .case-hero:before{background:radial-gradient(ellipse at 30% 35%,#e15b4866,transparent 58%),radial-gradient(ellipse at 75% 15%,#e15b4833,transparent 55%)}
.nike-page .cover-media{max-width:1040px;border-radius:14px;overflow:hidden;background:#ebebeb}
.nike-page .cover-media img{width:100%;height:auto;max-height:680px;object-fit:contain;filter:none}
.nike-home-art{background:#ebebeb}.nike-home-art img{object-fit:contain}
.nike-page .cover-label,.nike-page .subsection-label,.nike-page .cover-summary>a,.nike-page .evidence-link,.nike-page .decision-number,.nike-page .insight-cards article>span{color:#f0a091}
.nike-page .reading-progress,.nike-page .section-nav a[aria-current]:before{background:#e15b48}
.nike-page .section-nav a[aria-current]{color:#f6c2b8}.nike-page .contents-mobile nav a[aria-current]{color:#f6c2b8;background:#e15b4818}
.nike-page .takeaway{background:linear-gradient(135deg,#30211f,#201919)}.nike-page .takeaway>span{color:#f0a091}
.nike-workshop-photos,.nike-page .nike-table-wrap{margin-top:38px}
.nike-page .insight-cards{margin-top:36px}
.nike-page .insight-cards .evidence-link{margin-top:22px}
.nike-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#1e1a19}
.nike-scope-table{border-collapse:collapse;width:100%;font-size:14px;text-align:left;line-height:1.6}
.nike-scope-table caption{text-align:left;padding:22px;color:#f0a091;font-size:12px}
.nike-scope-table th,.nike-scope-table td{padding:18px 22px;border-top:1px solid var(--line);vertical-align:top}
.nike-scope-table th{color:#eee4e1;font-weight:500}.nike-scope-table td{color:#bcb2af}.nike-scope-table td:first-child{color:#e8e0dd}
.nike-status{display:inline-block;color:#f3b4a7;background:#e15b4814;border:1px solid #e15b4830;padding:2px 9px;border-radius:20px;font-size:12px}
.nike-table-wrap+.evidence-link{margin-top:20px}
.nike-journey-picker{display:flex;gap:10px;flex-wrap:wrap;margin:32px 0}
.nike-journey-picker button{font:inherit;font-size:13px;border:1px solid #e15b4840;border-radius:30px;background:#271c1a;color:#dfc4bd;padding:12px 18px;cursor:pointer;transition:background .2s,color .2s}
.nike-journey-picker button[aria-pressed="true"]{background:#f0a091;color:#271c1a;border-color:#f0a091}
.nike-route[hidden]{display:none}.nike-route>h3{margin-bottom:16px}.nike-route>p{max-width:800px}.nike-route-steps{color:#f0a091;font-size:13px;margin:22px 0 28px}
.nike-route .artifact-frame{aspect-ratio:auto;padding:8px}.nike-page .nike-route .artifact-frame img{height:auto;max-height:none}
.nike-page .evidence-wide{margin-top:36px}
.nike-page .browser-viewport img{display:block;width:100%;height:auto;max-height:none;object-fit:initial;margin:0;border:0;border-radius:0;padding:0}
.nike-page .browser-viewport{scrollbar-color:#e15b48 #2b201e}
.nike-pdp-preview .artifact-frame{height:520px;background:#fff;align-items:flex-start;overflow:hidden}
.nike-page .nike-pdp-preview .artifact-frame img{width:auto;max-width:100%;height:auto;max-height:none}
.nike-press{display:flex;gap:20px 30px;flex-wrap:wrap;margin-top:30px}
.nike-next-heading{margin:54px 0 18px}
.nike-page .nike-research-details .artifact-frame{aspect-ratio:3/4}.nike-page .nike-research-details .artifact-frame img{height:100%;max-height:100%;object-fit:contain}
@media(max-width:700px){.nike-page .cover-media{margin:0;width:100%}.nike-scope-table{min-width:560px}.nike-journey-picker{gap:8px}.nike-journey-picker button{font-size:12px;padding:10px 13px}.nike-page .nike-route .artifact-frame{padding:8px}.nike-home-art img{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.nike-journey-picker button{transition:none}}
@media print{.nike-route[hidden]{display:block}.nike-journey-picker{display:none}.nike-table-wrap{overflow:visible}}

/* Scrollable mobile evidence, framed like a physical handset. */
.nike-page .nike-pdp-preview{margin:0;min-width:0;text-align:center}
.nike-phone{width:min(100%,340px);margin:0 auto;padding:9px;background:#080809;border:1px solid #242426;border-radius:44px;box-shadow:inset 0 0 0 1px #151516,0 18px 35px #0007;box-sizing:border-box}
.nike-phone-display{position:relative;border-radius:34px;overflow:hidden;background:#000;isolation:isolate}
.nike-page .nike-phone-screen{width:100%;aspect-ratio:375 / 760;overflow:auto;background:#000;border:0;box-shadow:none;overscroll-behavior:contain;scrollbar-width:none}
.nike-page .nike-phone-screen::-webkit-scrollbar{display:none}
.nike-page .nike-phone-screen:focus-visible{outline:2px solid #f0a091;outline-offset:-3px}
.nike-page .nike-phone-screen img{display:block;width:100%;height:auto;max-height:none;min-height:0;object-fit:initial;margin:0;padding:0;border:0;border-radius:0;background:#000;box-shadow:none;outline:0}
.nike-page .nike-pdp-preview figcaption{text-align:center}
.nike-page .nike-pdp-preview .evidence-link{margin-top:8px}

/* Shared image framing across every project, including cover artwork. */
.case-page .artifact-frame,
.case-page .cover-media>a{padding:8px;border:1px solid #ffffff20;border-radius:14px;background:#171b21;overflow:hidden;box-sizing:border-box}
.case-page .cover-media>a{display:block}
.case-page .cover-media{background:transparent;border:0;border-radius:0;overflow:visible}
.case-page .cover-media>a>img,
.case-page .artifact-frame>img,
.case-page .evidence-grid figure:nth-child(2) .artifact-frame>img{border:0;border-radius:6px}

/* Fill the flow diagram's contained side areas with its black canvas. */
.case-page .artifact-frame.flow-black-frame{background:#000;box-shadow:inset 0 0 0 8px #171b21}
.case-page .artifact-frame.flow-black-frame>img{background:#000;border-radius:6px}

/* Let both sketch photos cover the exact inner frame dimensions. */
.case-page .evidence-grid .artifact-frame.sketch-frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.case-page .evidence-grid .artifact-frame.sketch-frame>img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;border-radius:6px}

.case-page .artifact-frame.comparison-frame{background:#f2f2f2;background-clip:padding-box;border-color:#34383d;box-shadow:inset 0 0 0 8px #171b21}
.case-page .artifact-frame.comparison-frame>img{background:#f2f2f2}

.case-page .evidence-grid .artifact-frame.wireframe-fill{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.case-page .evidence-grid figure .artifact-frame.wireframe-fill>img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;border-radius:6px;background:#ebebeb}

/* App and SoccerBible opening artwork share the same unframed treatment. */
.case-page .cover-media.cover-media-unframed>a{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.case-page .cover-media.cover-media-unframed>a>img{border-radius:0;background:transparent}

/* Keep oversized decorative layers inside the mobile document. */
@media(max-width:700px){
 .home-page{overflow-x:clip}
 .home-page main{min-width:0;overflow-x:clip}
 .home-page .work-card{min-width:0}
 .case-page .case-hero:before{
  top:-50px;height:420px;filter:blur(32px);
  background:radial-gradient(ellipse at 30% 35%,rgba(var(--aurora-rgb),.85),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--aurora-rgb),.55),transparent 55%);
  animation:project-aurora-mobile 4s ease-in-out infinite;
 }
}
@keyframes project-aurora-mobile{
 0%,100%{transform:translate3d(-9%,-2%,0) scale(.95);opacity:.38}
 50%{transform:translate3d(9%,6%,0) scale(1.08);opacity:.62}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 .case-page .case-hero:before{animation:none;transform:none;opacity:.45}
}

/* A single vertical track for the app process on narrow screens. */
@media(max-width:700px){
 #approach .timeline{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:0;margin-top:32px}
 #approach .timeline article{position:relative;border:0;padding:0 0 30px 28px;min-width:0}
 #approach .timeline article:last-child{padding-bottom:0}
 #approach .timeline article:before{left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
 #approach .timeline article:after{content:'';position:absolute;left:3px;top:16px;width:1px;height:calc(100% - 7px);background:#ffffff24;transform:none;animation:none;pointer-events:none}
 #approach .timeline article:last-child:after{display:none}
 #approach .timeline h3{margin:0 0 10px;font-size:20px;line-height:1.4}
 #approach .timeline p{margin:0;font-size:15px;line-height:1.7}
}

/* The same soft gradient fades continuously with each card's scroll position. */
@media(max-width:700px), (hover:none) and (pointer:coarse){
 .home-page .work-card{transition:border-color .16s linear,box-shadow .16s linear}
 .home-page .work-card:hover{transform:none}
 .home-page .work-card:hover .work-card-art img{transform:none}
 .home-page .work-card:before{background:radial-gradient(ellipse at 50% 25%,rgba(var(--card-rgb),.24),transparent 75%),linear-gradient(145deg,rgba(var(--card-rgb),.04),transparent);transition:opacity .16s linear}
 .home-page .work-card:not(:focus-visible){border-color:rgba(var(--card-rgb),calc(.10 + .22 * var(--card-glow,0)));box-shadow:0 10px 30px rgba(var(--card-rgb),calc(.07 * var(--card-glow,0)))}
 .home-page .work-card:not(:focus-visible):before{opacity:calc(.22 + .78 * var(--card-glow,0))}
}

/* Mobile artwork keeps its own proportions instead of letterboxing. */
@media(max-width:700px){
 .home-page .work-card-art:not(.cutout-art){height:auto;aspect-ratio:auto}
 .home-page .work-card-art:not(.cutout-art) img{width:100%;height:auto;object-fit:cover}
}
@media(prefers-reduced-motion:reduce){
 .home-page .work-card,.home-page .work-card:before{transition:none}
}

@media(max-width:700px){
 .mobile-contact .contact-dropdown{animation:none;transform-origin:top right}
 .mobile-contact summary .contact-morph{display:block;flex:0 0 22px;width:22px;height:22px}
}

/* Optional project summary, tucked below the opening overview. */
.case-page .project-tldr{position:relative;margin:24px 0 0;padding:0;border:1px solid #ffffff1c;border-radius:16px;background:#ffffff02;box-sizing:border-box;text-align:left}
.case-page .project-tldr[open]{background:linear-gradient(135deg,#ffffff06,transparent 65%),#15181be6}
.case-page .project-tldr-toggle{display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:18px 24px;min-height:58px;box-sizing:border-box;border-radius:inherit;color:#aab3bf}
.case-page .project-tldr-toggle>span{transform:none}
.case-page .project-tldr-label{margin:0;font-size:11px;font-weight:600;letter-spacing:1.6px;color:#b4bcc6}
.case-page .project-tldr-hint{font-size:12px;font-weight:400;letter-spacing:0;color:#949da7}
.project-tldr-chevron{margin-left:auto;flex:none;transition:transform .2s ease}
.project-tldr[open] .project-tldr-chevron{transform:rotate(180deg)}
.project-tldr-toggle:hover .project-tldr-label,.project-tldr[open] .project-tldr-label{color:var(--blue)}
.project-tldr-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.project-tldr-content{padding:6px 32px 24px}
.case-page .project-tldr h2{font-size:clamp(25px,2.8vw,34px);line-height:1.2;letter-spacing:-.025em;font-weight:500;margin:0 0 12px;color:#e6ebf1}
.case-page .project-tldr-intro{max-width:850px;font-size:15px;line-height:1.7;color:#b4bcc6;margin:0}
.project-tldr-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:24px 0 0;padding:24px 0 0;border-top:1px solid #ffffff14}
.project-tldr-point dt{font-size:10px;line-height:1.5;letter-spacing:1px;text-transform:uppercase;color:#949da7;margin:0 0 9px}
.project-tldr-point dd{margin:0}
.project-tldr-point strong{display:block;color:#e6ebf1;font-size:17px;line-height:1.4;font-weight:500}
.case-page .project-tldr-point p{font-size:13px;line-height:1.7;color:#aab3bf;margin:8px 0 0}
.project-tldr-footer{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:22px}
.project-tldr-link{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;font-size:12px;line-height:1.6;color:var(--blue);transition:color .2s}
.project-tldr-link:hover,.project-tldr-link:focus-visible{color:#fff}
.soccerbible-page .project-tldr{--blue:#c99fed}
@media(max-width:700px){
 .case-page .project-tldr{margin-top:20px;border-radius:14px}
 .case-page .project-tldr-toggle{padding:16px;gap:10px}
 .case-page .project-tldr-hint{font-size:11px}
 .project-tldr-content{padding:6px 20px 20px}
 .case-page .project-tldr-intro{font-size:14px;line-height:1.65}
 .project-tldr-points{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:20px;padding-top:20px}
 .project-tldr-point dt{margin-bottom:5px}
 .project-tldr-point strong{font-size:16px}
 .case-page .project-tldr-point p{margin-top:5px}
 .project-tldr-footer{flex-direction:column;align-items:flex-start;gap:14px;margin-top:20px}
 .project-tldr-link{margin-left:0;min-height:32px}
}

/* Later results and the next platform chapter stay distinct from launch metrics. */
.overview .early-results-label{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:#b8c9da;margin:36px 0 0}
.overview .early-results-label+.results-strip{margin-top:16px}
.app-continuation{border-top:1px solid var(--line)}
.app-impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:40px 0;padding:30px 0;border-top:1px solid #ffffff1c;border-bottom:1px solid #ffffff1c}
.app-impact>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;min-width:0}
.app-impact dt{font-size:12px;line-height:1.6;color:#aab3bf}
.app-impact dd{margin:0;font-size:clamp(32px,3.5vw,43px);line-height:1.2;font-weight:400;letter-spacing:-.03em;color:#e6ebf1}
.app-next-chapter{max-width:760px}
.app-next-chapter .subsection-label{margin-bottom:14px}
.app-next-chapter h3{font-size:26px;line-height:1.3;margin:0 0 16px}
.app-next-chapter>p:last-child{font-size:16px;line-height:1.75;margin:0}
@media(max-width:700px){
 .app-impact{grid-template-columns:minmax(0,1fr);gap:24px;margin:28px 0;padding:24px 0}
 .app-impact>div{gap:5px}
 .app-next-chapter h3{font-size:23px}
 .app-next-chapter>p:last-child{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.project-tldr-chevron{transition:none}}

/* One caption style for every project, including artwork, mockups and notes. */
.case-page{--caption-color:#97a6b6;--caption-size:12px;--caption-line-height:1.7;--caption-gap:18px}
.case-page figcaption,.case-page .small,.case-page .cover-media-note,.case-page .cta-specimen small{
 color:var(--caption-color);font-size:var(--caption-size);font-weight:400;line-height:var(--caption-line-height);letter-spacing:0;
}
.case-page figcaption{margin:var(--caption-gap) 0 0;padding:0;border:0;background:transparent}
.case-page .small,.case-page .cover-media-note{margin-top:var(--caption-gap)}
.case-page figcaption a,.case-page figcaption .evidence-link,.case-page .browser-evidence figcaption a,.case-page figcaption b,.case-page figcaption strong{
 color:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;
}
.case-page figcaption a:hover,.case-page figcaption a:focus-visible,.case-page figcaption .evidence-link:hover,.case-page figcaption .evidence-link:focus-visible{color:#fff}

/* Distinct closing groups: product links, more work, then contact. */
.project-resources{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:calc(var(--case-content-gap) * 2)}
.case-page .project-resources-label{flex-basis:100%;margin:0 0 4px;font-size:var(--caption-size);line-height:var(--caption-line-height);font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--caption-color)}
.project-resources a{min-height:44px;padding:10px 18px;border:1px solid #ffffff26;border-radius:30px;background:#181c22;font-size:13px;line-height:1.7;color:#c3ceda}
.project-resources a:hover,.project-resources a:focus-visible{color:#fff;background:#20262e;border-color:#ffffff40}
.project-resources a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* Compact rotating border beam, adapted from libraries.dev/beam (MIT).
 * Copyright (c) 2026 Jakub Antalik
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
@property --border-beam-angle{syntax:"<angle>";initial-value:0deg;inherits:true}
.border-beam-link{position:relative;isolation:isolate}
.border-beam-link .store-link-label,.border-beam-link .link-arrow,.border-beam-link .project-pagination-thumb,.border-beam-link .project-pagination-copy{position:relative;z-index:1}
.border-beam{display:none}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
 .border-beam{
  display:block;position:absolute;inset:-1px;overflow:hidden;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:.7;animation:border-beam-turn 3.8s linear infinite;
  transition:opacity .35s ease;
  --border-beam-colours:radial-gradient(ellipse 80px 18px at 24% 0%,#ff7850,transparent),radial-gradient(ellipse 60px 28px at 100% 35%,#e35eb5,transparent),radial-gradient(ellipse 100px 22px at 70% 100%,#8063ff,transparent),radial-gradient(ellipse 50px 32px at 0% 70%,#42cab2,transparent),radial-gradient(ellipse 80px 24px at 45% 100%,#408fff,transparent);
  --border-beam-sweep:conic-gradient(from var(--border-beam-angle),transparent 0% 22%,#ffffff1f 28%,#ffffff66 36%,#fff 46% 82%,#ffffff66 88%,#ffffff1f 94%,transparent 97% 100%);
 }
 .project-pagination-link .border-beam{
  --border-beam-colours:radial-gradient(ellipse 40% 41% at 24% 0%,#ff7850,transparent),radial-gradient(ellipse 30% 64% at 100% 35%,#e35eb5,transparent),radial-gradient(ellipse 50% 50% at 70% 100%,#8063ff,transparent),radial-gradient(ellipse 25% 73% at 0% 70%,#42cab2,transparent),radial-gradient(ellipse 40% 55% at 45% 100%,#408fff,transparent);
 }
 .border-beam::before,.border-beam::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--border-beam-angle),transparent 54%,#ffffff26 60%,#ffffffbf 66%,#ffffff26 72%,transparent 78%),var(--border-beam-colours);
  -webkit-mask:var(--border-beam-sweep),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:source-in,xor;
  mask:var(--border-beam-sweep),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:intersect,exclude;
 }
 .border-beam::before{padding:4px;filter:blur(3px);opacity:.45}
 .border-beam-link:nth-of-type(2) .border-beam{animation-delay:-1.9s}
 .border-beam-link[data-beam-paused] .border-beam{animation-play-state:paused}
 .border-beam-link:hover .border-beam,.border-beam-link:focus-visible .border-beam{opacity:1}
}
@keyframes border-beam-turn{from{--border-beam-angle:0deg}to{--border-beam-angle:360deg}}
@media(max-width:700px){.border-beam{opacity:.6}}
@media(prefers-reduced-motion:reduce){.border-beam{animation:none;transition:none;--border-beam-angle:35deg}}
.project-pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:32px 0 0;border-top:1px solid var(--line)}
.case-page .project-pagination-link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;min-width:0;padding:24px;border:1px solid #ffffff20;border-radius:14px;background:#171b21;color:#dce5ed;transition:color .2s,border-color .2s,background .2s}
.project-pagination-thumb{display:block;width:112px;height:84px;object-fit:cover;border-radius:7px;background:#101114}
.project-pagination-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.project-pagination-label{font-size:var(--caption-size);line-height:var(--caption-line-height);color:var(--caption-color)}
.project-pagination-title{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.project-pagination-title strong{min-width:0;font-size:clamp(19px,2vw,24px);line-height:1.3;letter-spacing:-.025em;font-weight:400;overflow-wrap:anywhere}
.case-page .project-pagination-next{grid-template-columns:minmax(0,1fr) auto;text-align:right}
.project-pagination-next .project-pagination-copy{align-items:flex-end}
.case-page .project-pagination-link:hover,.case-page .project-pagination-link:focus-visible{color:#fff;background:#1d232b;border-color:#ffffff40}
.project-pagination-link:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.project-pagination-previous:hover .arrow-left,.project-pagination-previous:focus-visible .arrow-left{transform:translateX(-3px)}
.case-page .footer{box-sizing:border-box;margin-top:48px;margin-bottom:24px;padding:40px 40px 24px;gap:28px 40px;border:1px solid #ffffff15;border-radius:16px;background:#14181d}
.case-page .footer .section-label{font-size:10px;line-height:1.6;color:var(--caption-color);margin-bottom:16px}
.case-page .footer h2{max-width:520px;font-size:28px;line-height:1.35}
.case-page .footer-mail{font-size:17px;margin-top:20px}
.case-page .footer-links{font-size:13px}
.case-page .footer-credit{font-size:11px;line-height:1.7;padding-top:20px}
@media(max-width:700px){
 .project-resources{gap:10px}
 .project-pagination{grid-template-columns:minmax(0,1fr);gap:14px;padding:28px 0 0}
 .case-page .project-pagination-link{gap:16px;padding:18px}
 .project-pagination-thumb{width:88px;height:72px}
 .project-pagination-title{gap:8px}
 .project-pagination-title strong{font-size:18px;line-height:1.4}
 .case-page .footer{margin-top:32px;margin-bottom:20px;padding:26px 22px 20px;gap:24px;border-radius:14px}
 .case-page .footer h2{font-size:24px}
 .case-page .footer-mail{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .case-page .project-pagination-link{transition:none}
 .project-pagination-previous:hover .arrow-left,.project-pagination-previous:focus-visible .arrow-left{transform:none}
}

/* SoccerBible: real design evidence linked to the decisions behind it. */
.sb-research-intro{max-width:800px}
.sb-research-intro h2{margin:18px 0 22px}
.sb-research-intro>p{margin:0;font-size:16px;line-height:1.8}
.sb-research-instruction{margin:0 0 24px;padding-top:24px;border-top:1px solid var(--line);color:var(--caption-color);font-size:13px;line-height:1.7}
.sb-research-process{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:26px 0 32px;color:var(--caption-color);font-size:12px;line-height:1.7}
.sb-research-process li{display:flex;align-items:center;gap:22px}
.sb-research-process .sb-process-arrow{display:block;flex:0 0 18px;width:18px;height:18px;color:#c99fed}
.sb-research-decisions{position:relative}
.sb-research-item{border:0;border-radius:0;background:none;margin:0 0 12px;padding:0}
.sb-research-item summary{display:flex;align-items:center;gap:14px;padding:20px 18px;list-style:none;cursor:pointer;border:1px solid #ffffff20;border-radius:12px;background:#171b21;transition:background .2s,border-color .2s;color:#dce5ed}
.sb-research-item summary::-webkit-details-marker{display:none}
.sb-research-item summary::marker{content:''}
.sb-research-item[open] summary span{transform:none}
.sb-research-number{font-size:12px;color:var(--caption-color);align-self:flex-start;line-height:24px}
.sb-research-choice{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sb-research-choice strong{font-size:15px;font-weight:500;line-height:1.5}
.sb-research-choice>span{font-size:12px;line-height:1.6;color:var(--caption-color)}
.sb-research-chevron{flex:0 0 18px;transition:transform .25s}
.sb-research-item[open] summary{border-color:#c99fed70;background:#211e2b}
.sb-research-item[open] .sb-research-number{color:#c99fed}
.sb-research-item[open] .sb-research-chevron{transform:rotate(180deg)}
.sb-research-item summary:hover{border-color:#c99fed70}
.sb-research-item summary:focus-visible,.sb-research-switch button:focus-visible{outline:2px solid #c99fed;outline-offset:4px}
.sb-research-panel{padding:26px 0 16px}
.case-page .sb-research-panel h3{font-size:25px;line-height:1.3;margin:10px 0 24px;letter-spacing:-.025em}
.sb-research-reasoning{margin:0 0 28px;display:grid;gap:18px}
.sb-research-reasoning>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px}
.sb-research-reasoning dt{font-size:12px;color:#c99fed;line-height:1.75}
.sb-research-reasoning dd{margin:0;font-size:14px;line-height:1.75;color:#b4bcc6}
.sb-research-panel figure{margin:0}
.sb-research-panel .artifact-frame{display:block;background:#0d0d0d}
.sb-research-panel .artifact-frame img{display:block;width:100%;height:360px;object-fit:contain;background:#0d0d0d;border-radius:6px}
/* Same static viewport for both homepages: preserve proportions and crop from the top. */
.case-page #finding-hierarchy .artifact-frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:3344/1874;height:auto;overflow:hidden}
.case-page #finding-hierarchy .artifact-frame img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:center top}
.sb-research-switch{display:flex;gap:4px;padding:4px;width:fit-content;margin:0 0 16px;border:1px solid #ffffff20;border-radius:10px;background:#14171d}
.sb-research-switch button{font:inherit;font-size:12px;line-height:1.5;min-height:40px;padding:10px 14px;border:0;border-radius:7px;background:transparent;color:var(--caption-color);cursor:pointer;transition:background .2s,color .2s}
.sb-research-switch button[aria-pressed="true"]{background:#32283e;color:#eee3fa}
.sb-research-switch button:hover{color:#fff}
.sb-research-decisions [hidden]{display:none!important}
@media(min-width:900px){
 .sb-research-decisions.is-enhanced .sb-research-item summary{width:34%;box-sizing:border-box}
 .sb-research-decisions.is-enhanced .sb-research-panel{position:absolute;top:0;right:0;width:61%;padding:0 0 8px}
}
@media(max-width:600px){
 .sb-research-intro>p{font-size:15px}
 .sb-research-process{gap:8px 14px;margin:22px 0 24px;font-size:11px}
 .sb-research-process li{gap:14px}
 .sb-research-item summary{padding:16px 14px;gap:12px}
 .sb-research-reasoning>div{grid-template-columns:1fr;gap:4px}
 .sb-research-reasoning{gap:18px}
 .sb-research-panel .artifact-frame img{height:300px}
 .sb-research-panel{padding:24px 6px}
}
@media(prefers-reduced-motion:reduce){
 .sb-research-item summary,.sb-research-chevron,.sb-research-switch button{transition:none}
}

/* SoccerBible case study: context, evidence and responsive delivery. */
.sb-scale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:30px 0;margin:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sb-scale>div{display:flex;flex-direction:column-reverse;gap:6px}
.sb-scale dt{font-size:13px;color:var(--caption-color)}
.sb-scale dd{margin:0;font-size:46px;line-height:1.2;letter-spacing:-.04em;color:#eadcf6}
.sb-brief{max-width:780px;margin-bottom:36px}
.sb-brief h3,.sb-subsection h3,.sb-measurement h3{font-size:26px;margin:10px 0 16px}
.sb-brief p,.sb-subsection>p:last-child,.sb-measurement>p{font-size:15px;line-height:1.8}
.sb-concept-grid{margin-top:36px}
.case-page .sb-concept-grid .artifact-frame{display:grid;grid-template: minmax(0,1fr) / minmax(0,1fr);aspect-ratio:4/3}
.case-page .evidence-grid.sb-concept-grid figure .artifact-frame img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:top}
.sb-subsection{max-width:750px;margin:52px 0 28px}
.sb-device-pair{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:start;margin-top:28px}
.sb-device-pair figure{min-width:0;margin:0}
.sb-device-pair .browser-mockup{min-width:0;aspect-ratio:auto;overflow:hidden}
.sb-page-scroll{height:500px;flex:0 0 auto;overflow:auto;background:#fff;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#777 #e9e9e9}
.case-page .sb-page-scroll img{display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:initial;margin:0;border:0;border-radius:0;background:#fff}
.sb-page-scroll:focus-visible{outline:2px solid #c99fed;outline-offset:-3px}
.sb-mobile-preview .browser-chrome{gap:8px;padding-inline:10px}
.sb-mobile-preview .browser-dots{width:auto;gap:4px;flex-shrink:0}
.sb-mobile-preview .browser-dots i{width:6px;height:6px}
.sb-mobile-preview .browser-address{font-size:10px;padding:4px 10px;white-space:nowrap}
.sb-mobile-preview .browser-menu{width:12px;flex-shrink:0}
.sb-evidence-tabs{margin-top:32px}
.sb-tab-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.sb-tab-controls button{font:inherit;font-size:13px;padding:11px 18px;min-height:44px;color:#b4bcc6;background:#171b21;border:1px solid #ffffff20;border-radius:24px;cursor:pointer;transition:background .2s,color .2s}
.sb-tab-controls button[aria-pressed="true"]{color:#f0e7f7;background:#33243f;border-color:#b17dd77a}
.sb-tab-controls button:hover{color:#fff}
.sb-tab-controls button:focus-visible{outline:2px solid #c99fed;outline-offset:4px}
.sb-evidence-tabs [hidden]{display:none!important}
.sb-panel-heading{font-size:20px;margin:20px 0}
.sb-evidence-tabs.is-enhanced .sb-panel-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sb-evolution{margin-top:0}
.case-page .sb-evolution .artifact-frame{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);aspect-ratio:2880/1608}
.case-page .sb-evolution .artifact-frame img{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;background:#f2ede1}
.sb-mobile-detail{margin-top:28px}
.sb-mobile-detail summary{font-size:13px}
.sb-mobile-detail summary span,.sb-mobile-detail[open] summary span{font-size:13px;transform:none}
.sb-mobile-detail summary svg{transition:transform .2s}
.sb-mobile-detail[open] summary svg{transform:rotate(180deg)}
.sb-mobile-evolution{max-width:660px;margin:12px auto 30px;align-items:start}
.case-page .evidence-grid.sb-mobile-evolution .artifact-frame{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);aspect-ratio:390/780}
.case-page .evidence-grid.sb-mobile-evolution figure .artifact-frame img{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:top}
.sb-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:36px 0}
.sb-methods article{min-width:0;padding-top:24px;border-top:1px solid #c99fed40}
.sb-methods h3{font-size:21px;margin:12px 0}
.sb-methods p{font-size:14px;line-height:1.8;margin:0}
.sb-measurement{margin-top:44px;padding:32px;border:1px solid #ffffff20;border-radius:14px;background:#19171f}
.sb-measurement>p{max-width:800px}
.sb-data-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:24px 0 0;margin:24px 0 0;border-top:1px solid #ffffff20}
.sb-data-flow li{position:relative;min-width:0}
.sb-data-flow strong{font-size:15px;font-weight:500;color:#eadcf6;display:block}
.sb-data-flow span{display:block;font-size:12px;line-height:1.7;color:var(--caption-color);margin-top:6px}
.sb-data-flow svg{position:absolute;right:-19px;top:4px;color:#c99fed}
.sb-outcome-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:40px 0 18px}
.sb-outcome-metrics>div{padding:28px;border:1px solid #c99fed30;border-radius:14px;background:linear-gradient(135deg,#30233e,#19171f);display:flex;flex-direction:column;gap:14px}
.sb-outcome-metrics dt{font-size:13px;color:#c0b3cc}
.sb-outcome-metrics dd{margin:0;font-size:clamp(32px,4vw,46px);letter-spacing:-.04em;line-height:1.2;color:#eee4f7}
.sb-outcome-metrics dd span{display:block;font-size:11px;letter-spacing:.05em;color:var(--caption-color);margin-top:12px}
@media(max-width:800px){
 .sb-device-pair{grid-template-columns:minmax(0,1fr);gap:28px}
 .sb-mobile-preview{width:min(280px,100%);justify-self:center}
 .sb-page-scroll{height:380px}
 .sb-mobile-preview .sb-page-scroll{height:520px}
 .sb-methods{grid-template-columns:1fr;gap:24px}
 .sb-outcome-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .sb-measurement{padding:24px}
 .sb-data-flow{grid-template-columns:1fr;gap:30px}
 .sb-data-flow svg{right:auto;left:0;top:auto;bottom:-25px;transform:rotate(90deg)}
}
@media(max-width:480px){
 .sb-scale{gap:20px}.sb-scale dd{font-size:38px}.sb-scale dt{font-size:12px}
 .sb-outcome-metrics>div{padding:20px 16px}.sb-outcome-metrics dd{font-size:34px}
 .sb-mobile-evolution{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(prefers-reduced-motion:reduce){.sb-tab-controls button,.sb-mobile-detail summary svg{transition:none}}

/* Research evidence uses a consistent desktop crop with an optional mobile view. */
.case-page .sb-research-panel figure[data-research-device="desktop"] .artifact-frame{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);aspect-ratio:3344/1874;height:auto;overflow:hidden}
.case-page .sb-research-panel figure[data-research-device="desktop"] img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:top}
.case-page .sb-research-panel figure[data-research-device="mobile"]{width:min(280px,100%);margin-inline:auto}
.case-page .sb-research-panel figure[data-research-device="mobile"] .artifact-frame{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);height:auto;aspect-ratio:390/780;overflow:hidden}
.case-page .sb-research-panel figure[data-research-device="mobile"] img{width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:top}
/* Override the homepage comparison's desktop proportions when switching devices. */
.case-page #finding-hierarchy figure[data-research-device="mobile"] .artifact-frame{aspect-ratio:390/780}

/* Keep the title-to-artwork gap consistent across case studies. */
.case-page .case-cover{padding-bottom:30px}
@media(max-width:700px){.case-page .case-cover{padding-bottom:22px}}

/* Complete artwork fades in without revealing partially decoded pixels. */
.case-page .cover-media img{transition:opacity .28s ease-out}
.hero-image-pending .case-page .cover-media img{opacity:0}
@media(prefers-reduced-motion:reduce){.case-page .cover-media img{transition:none}}

/* Shared neutral section surfaces; project accents belong to the cover and highlights. */
.case-page .case-chapter-band,.case-page .approach-panel,.case-page .outcomes-panel{
 background:var(--section-background);
}
.case-page main .section-label{display:flex;align-items:center;gap:20px;color:var(--section-heading-color,var(--blue))}
.case-page main .section-label:after{content:"";height:1px;flex:1;min-width:24px;background:linear-gradient(90deg,currentColor,transparent);opacity:.3}

/* Chapter-label dividers replace the older full-width section rules. */
.case-page main>section{border-top:0;border-bottom:0}
.case-page .cover-overview{border-bottom:0}

/* Nike: focused previews retain the complete design in the image viewer. */
.nike-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:38px;align-items:start}
.nike-focus-grid.nike-three-up{grid-template-columns:repeat(3,minmax(0,1fr))}
.nike-page .nike-focus{margin:0;min-width:0}
.nike-page .nike-focus .artifact-frame{display:block;aspect-ratio:1/1;overflow:hidden}
.nike-page .nike-focus .artifact-frame img{display:block;width:100%;height:auto;max-height:none;border-radius:6px;object-fit:initial;padding:0}
.nike-page .nike-focus.nike-mobile .artifact-frame{aspect-ratio:828/1800}
.nike-page .nike-focus.nike-complete .artifact-frame img{height:100%;object-fit:contain;background:#000}
.nike-page .nike-focus.nike-landscape .artifact-frame{aspect-ratio:1.45}
.nike-page .nike-focus.nike-fr .artifact-frame{aspect-ratio:1.15}
.nike-page .nike-focus.nike-email .artifact-frame{aspect-ratio:1/2.45}
.nike-page .nike-focus.nike-prompt{max-width:100%;margin-top:28px}
.nike-page .nike-focus.nike-prompt .artifact-frame{aspect-ratio:1.5}
.nike-detail-heading{margin-top:64px;max-width:780px}
.nike-detail-heading h3{margin-bottom:16px}
.nike-page .nike-focus figcaption{margin-top:18px;color:#97a6b6;font-size:12px;line-height:1.7}
.nike-journey-picker[hidden]{display:none}
.nike-route.is-entering{animation:nike-route-in .22s ease-out}
@keyframes nike-route-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.nike-focus-grid,.nike-focus-grid.nike-three-up{grid-template-columns:1fr;gap:32px}.nike-page .nike-focus.nike-mobile{width:min(100%,360px);margin-inline:auto}.nike-detail-heading{margin-top:44px}}
@media(prefers-reduced-motion:reduce){.nike-route.is-entering{animation:none}}

/* Research evidence stays optional within the Nike discovery chapter. */
.nike-research-evidence{margin-top:36px;border:1px solid #ffffff20;border-radius:14px;background:#17191d}
.nike-research-evidence summary{display:flex;justify-content:space-between;gap:20px;padding:22px 26px;cursor:pointer;font-size:15px;list-style:none;color:#eee}
.nike-research-evidence summary::-webkit-details-marker{display:none}
.nike-research-evidence summary span{color:#f0a091;transition:transform .2s}
.nike-research-evidence[open] summary span{transform:rotate(45deg)}
.nike-research-evidence-body{padding:0 26px 26px}
.nike-page .nike-research-board .artifact-frame img{width:100%;height:auto;max-height:none;object-fit:contain}
.nike-research-evidence summary:focus-visible{outline:2px solid #f0a091;outline-offset:4px}
@media(max-width:700px){.nike-research-evidence summary{padding:20px 16px}.nike-research-evidence-body{padding:0 16px 20px}}
@media(prefers-reduced-motion:reduce){.nike-research-evidence summary span{transition:none}}

.nike-ba-workshop-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px;align-items:start}
.nike-ba-workshop-photos figure{margin:0;min-width:0}
.nike-page .nike-ba-workshop-photos .artifact-frame img{width:100%;height:auto;max-height:none;object-fit:contain}
.nike-ba-workshop-photos figcaption{margin-top:18px;color:#97a6b6;font-size:12px;line-height:1.7}
@media(max-width:700px){.nike-ba-workshop-photos{grid-template-columns:1fr}}

/* Nike artwork uses the same floating hero and card proportions as SoccerBible. */
.nike-page .cover-media.cover-media-unframed{background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
.nike-page .cover-media.cover-media-unframed img{width:100%;height:auto;max-height:none;object-fit:contain}
.work-nike .nike-home-art{height:auto;aspect-ratio:8 / 5;background:#111}
.work-nike .nike-home-art img{object-fit:contain}

/* Sport Foundry uses the same case-study shell and its homepage accent. */
.sport-foundry-page{--project-accent:92,179,143;--section-heading-color:#5cb38f;--blue:#a4d9c1;--line:#ffffff18}
.sf-generations{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.sf-generations article{padding:32px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.sf-generations h3{font-size:26px;margin:20px 0 16px;letter-spacing:-.035em}
.sf-generations p{color:var(--muted);line-height:1.7;margin:0}
@media(max-width:700px){.sf-generations{grid-template-columns:1fr}.sf-generations article{padding:24px}}

/* Carry the homepage project colour through the entire Sport Foundry case study. */
.sport-foundry-page .case-hero{--aurora-rgb:var(--project-accent);background:radial-gradient(ellipse 63% 36% at 50% 5%,rgba(var(--project-accent),.24),transparent 80%)}
.sport-foundry-page .case-hero:before{background:radial-gradient(ellipse at 30% 35%,rgba(var(--project-accent),.45),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--project-accent),.28),transparent 55%)}
.sport-foundry-page .case-cover h1{text-shadow:0 0 36px rgba(var(--project-accent),.16)}
.sport-foundry-page .cover-label,.sport-foundry-page .cover-summary>a,.sport-foundry-page .insight-cards article>span{color:var(--blue)}
.sport-foundry-page .reading-progress,.sport-foundry-page .section-nav a[aria-current]:before{background:rgb(var(--project-accent))}
.sport-foundry-page .section-nav a[aria-current],.sport-foundry-page .contents-mobile nav a[aria-current]{color:var(--blue)}
.sport-foundry-page .contents-mobile nav a[aria-current]{background:rgba(var(--project-accent),.1)}

.sf-placeholder{margin:0;padding:32px;border:1px dashed rgba(var(--project-accent),.35);border-radius:16px;min-height:230px;display:flex;flex-direction:column;justify-content:center;background:rgba(var(--project-accent),.035)}
.sf-placeholder h3{font-size:24px}.sf-placeholder p{font-size:14px;line-height:1.7}

/* Pro:Direct ecommerce: match the warm accent on its homepage project card. */
.prodirect-sport-page{--project-accent:201,135,76;--section-heading-color:#c9874c;--blue:#e4b58b;--line:#ffffff18}
.prodirect-sport-page .case-hero{--aurora-rgb:var(--project-accent);background:radial-gradient(ellipse 63% 36% at 50% 5%,rgba(var(--project-accent),.24),transparent 80%)}
.prodirect-sport-page .case-hero:before{background:radial-gradient(ellipse at 30% 35%,rgba(var(--project-accent),.45),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--project-accent),.28),transparent 55%)}
.prodirect-sport-page .case-cover h1{text-shadow:0 0 36px rgba(var(--project-accent),.16)}
.prodirect-sport-page .cover-label,.prodirect-sport-page .cover-summary>a,.prodirect-sport-page .insight-cards article>span{color:var(--blue)}
.prodirect-sport-page .reading-progress,.prodirect-sport-page .section-nav a[aria-current]:before{background:rgb(var(--project-accent))}
.prodirect-sport-page .section-nav a[aria-current],.prodirect-sport-page .contents-mobile nav a[aria-current]{color:var(--blue)}
.prodirect-sport-page .contents-mobile nav a[aria-current]{background:rgba(var(--project-accent),.1)}
.pd-legacy-evidence{margin-top:calc(var(--case-content-gap) * 2)}
.pd-legacy-evidence>h3{font-size:20px;font-weight:500;line-height:1.4;margin:0 0 20px}
.pd-legacy-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0}.pd-legacy-gallery figure{margin:0}.pd-legacy-gallery img{display:block;width:100%;height:auto;border-radius:8px}.pd-legacy-gallery .artifact-frame{display:block;padding:0;background:transparent;aspect-ratio:auto}.pd-legacy-gallery figcaption{font-size:12px;margin-top:12px}
.pd-market-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}.pd-market-grid article{padding:28px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.pd-market-grid h3{font-size:24px;margin:16px 0}.pd-market-grid a{color:var(--blue);font-size:13px}.pd-domain-links{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:700px){.pd-market-grid,.pd-legacy-gallery{grid-template-columns:1fr}.pd-market-grid article{padding:24px}}

.pd-project-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:32px 0 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-project-highlights span{display:block;font-size:10px;letter-spacing:1.2px;color:var(--blue);margin-bottom:10px}
.pd-project-highlights strong{display:block;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.025em;color:var(--ink)}
.pd-project-highlights p{font-size:13px;line-height:1.6;margin:8px 0 0}
@media(max-width:700px){.pd-project-highlights{grid-template-columns:1fr;gap:22px;padding:24px 0}.pd-project-highlights strong{font-size:20px}}

.pd-estate-scale{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:32px 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-estate-scale strong{display:block;font-size:28px;font-weight:500;color:var(--blue);letter-spacing:-.03em}.pd-estate-scale span{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.prodirect-sport-page .intro-grid+.learning-table{margin-top:36px}
@media(max-width:700px){.pd-estate-scale{grid-template-columns:1fr;gap:22px}}

.case-page .cover-date{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:8px;row-gap:4px}.project-attribute{display:inline-block}

/* Shared editorial rhythm and accents for equivalent case-study components. */
.case-page{--case-section-space:105px;--case-content-gap:36px;--case-label-gap:24px;--case-intro-gap:60px}
.case-page main .section{padding-block:var(--case-section-space)}
/* Destination links finish the chapter, with its background continuing behind them. */
.case-page main .project-closing-section{padding-bottom:var(--case-content-gap)}
.case-page main .section-label{margin:0 0 var(--case-label-gap)}
.case-page .intro-grid{gap:var(--case-intro-gap)}
.case-page main .intro-grid+.learning-table,.case-page main .intro-grid+.insight-cards,.case-page main .intro-grid+.evidence-grid{margin-top:var(--case-content-gap)}
.case-page main .section>.insight-cards:last-child{margin-bottom:0}
.case-page main .cover-label,.case-page main .cover-summary>a,.case-page main .subsection-label,.case-page main .insight-cards article>span{color:var(--blue)}
.case-page .cover-overview{margin-top:40px;padding-bottom:20px}
@media(max-width:1000px){.case-page{--case-intro-gap:38px}}
@media(max-width:700px){.case-page{--case-section-space:60px;--case-content-gap:28px;--case-intro-gap:25px}.case-page .cover-overview{margin-top:22px}}
@media print{.case-page{--case-section-space:35px}}

/* A concise introduction, followed by aligned facts and the existing impact row. */
.prodirect-sport-page .pd-overview{grid-template-columns:minmax(0,1fr);gap:var(--case-content-gap);padding-bottom:0}
.pd-overview .cover-summary{max-width:860px}
.pd-overview .cover-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pd-overview .cover-facts>div{min-width:0;grid-column:auto}
@media(max-width:700px){
 .pd-overview .cover-facts{grid-template-columns:minmax(0,1fr);gap:20px}
 .pd-overview .cover-facts>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px}
 .pd-overview .cover-facts dt{margin-bottom:0}
}

/* Navigation research uses the case-study accent and shared section rhythm. */
.pd-tree-results{margin-top:var(--case-content-gap);overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.pd-tree-results:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.pd-tree-results table{width:100%;border-collapse:collapse;text-align:left;font-size:15px}
.pd-tree-results caption{text-align:left;padding:24px;font-size:16px;color:var(--ink);font-weight:500}
.pd-tree-results th,.pd-tree-results td{padding:20px 24px;border-top:1px solid var(--line)}
.pd-tree-results thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pd-tree-results tbody th{font-weight:400;color:var(--ink)}
.pd-tree-results tbody th span{display:block;font-size:10px;letter-spacing:.1em;color:var(--blue);margin-bottom:6px}
.pd-tree-results td{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.pd-tree-results strong{font-weight:500;color:var(--blue)}
.pd-tree-note{margin-top:18px;line-height:1.7}
@media(max-width:700px){.pd-tree-results th,.pd-tree-results td{padding:16px}.pd-tree-results caption{padding:20px 16px}.pd-tree-results table{min-width:570px;font-size:14px}}

/* TEK:CV project preview, using the shared portfolio shell. */
.home-page .work-tek .tek-card-art:not(.cutout-art){background:#101010;aspect-ratio:8 / 5;height:auto;isolation:isolate}.tek-card-video{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten}
.tek-page{--project-accent:178,200,132;--blue:#b2c884}
.tek-page .case-hero{--aurora-rgb:var(--project-accent);background:radial-gradient(ellipse 63% 36% at 50% 5%,rgba(var(--project-accent),.24),transparent 80%)}
.tek-page .case-hero:before{background:radial-gradient(ellipse at 30% 35%,rgba(var(--project-accent),.45),transparent 58%),radial-gradient(ellipse at 75% 15%,rgba(var(--project-accent),.28),transparent 55%)}
.tek-page .case-cover h1{text-shadow:0 0 36px rgba(var(--project-accent),.16)}
.tek-page .reading-progress{background:rgb(var(--project-accent))}
.tek-film{overflow:hidden;border-radius:16px;background:#111;border:1px solid #ffffff15}.tek-film video{display:block;width:100%;height:auto}
@media(max-width:700px){.tek-film{border-radius:10px}}

/* Date-led progression between the two Pro:Direct platform programmes. */
.pd-programme-timeline{margin-top:56px;padding-top:36px;border-top:1px solid #ffffff18}
.pd-programme-timeline>h3{font-size:clamp(23px,2.5vw,32px);font-weight:450;line-height:1.3;margin:12px 0 30px;max-width:640px}
.pd-programme-timeline a{font-size:12px;color:var(--blue)}
.pd-phase-transition{border:1px solid rgba(var(--project-accent),.25);background:linear-gradient(110deg,rgba(var(--project-accent),.1),transparent);border-radius:16px;padding:30px 34px;margin:24px 0 42px}
.pd-phase-transition>span{font-size:10px;letter-spacing:.14em;color:var(--blue)}
.pd-phase-transition p{display:flex;align-items:center;gap:24px;margin:18px 0;font-size:clamp(25px,4vw,42px);line-height:1.2}
.pd-phase-transition strong{font-weight:450}.pd-phase-transition p>span{color:var(--blue)}
.pd-phase-transition>div{font-size:13px;color:#a7afb9}
@media(max-width:700px){.pd-phase-transition{padding:24px}.pd-phase-transition p{gap:18px}}

/* Pro:Direct supporting evidence stays open, with panels reserved for key comparisons. */
.pd-research-followthrough{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.pd-research-followthrough h3{font-size:20px;font-weight:500;margin-bottom:14px}.pd-research-followthrough p{font-size:15px;line-height:1.75}
.pd-platform-ownership{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:40px}
.pd-platform-ownership>div{border-top:1px solid var(--line);padding:24px 0 28px}
.pd-platform-ownership dt{font-size:20px;font-weight:500;line-height:1.4;color:var(--ink)}
.pd-platform-ownership dt>span:not(.tool-logo){display:block;font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--blue);margin-bottom:10px}
.pd-platform-ownership dd{font-size:15px;line-height:1.75;color:var(--muted);margin:12px 0 0}
@media(max-width:700px){.pd-research-followthrough,.pd-platform-ownership{grid-template-columns:1fr}.pd-research-followthrough{gap:28px}}

/* Reuse About's platform badges without reintroducing boxed cards. */
.pd-platform-ownership>div{position:relative;padding-left:70px;min-height:126px}
.pd-platform-ownership .pd-platform-logo{position:absolute;left:0;top:24px}
.pd-platform-monogram{font-size:16px;font-weight:500;letter-spacing:.03em;color:#eee}
@media(max-width:400px){.pd-platform-ownership>div{padding-left:64px}.pd-platform-ownership dt{font-size:18px}}

/* Mini case studies reuse the project shell and neutral editorial surfaces. */
.mini-intro{max-width:760px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.75;text-align:center}
.mini-studies{padding-top:40px}
.mini-study{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--case-intro-gap);padding:var(--case-section-space) 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.mini-study-heading h2{font-size:clamp(28px,3.3vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin:20px 0}
.mini-context{font-size:13px;color:var(--muted)}
.mini-study-body>p{color:var(--muted)}
.mini-study-body>.large{color:var(--ink);font-size:20px}
.mini-results{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}
.mini-results dt{font-size:12px;color:var(--muted)}
.mini-results dd{font-size:28px;color:var(--blue);font-weight:500;margin-top:8px}
.mini-scope,.mini-flow{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:28px 0}
.mini-scope li,.mini-flow li{padding:9px 12px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:12px;background:var(--section-background)}
.mini-detail{margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mini-detail summary{padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;color:var(--blue);font-size:14px}
.mini-detail summary::-webkit-details-marker{display:none}
.mini-detail summary span{font-size:24px;line-height:1;transition:transform .2s}
.mini-detail[open] summary span{transform:rotate(45deg)}
.mini-detail summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.mini-detail>div{padding:8px 0 28px}
.mini-detail h3{font-size:18px;font-weight:500;margin:24px 0 10px}
.mini-detail h3:first-child{margin-top:0}
.mini-detail p{font-size:15px;color:var(--muted)}
.mini-detail .mini-note{font-size:12px;margin-top:20px}
.mini-detail .text-link{margin-top:24px;display:inline-flex}
.mini-home-link{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mini-home-link h2{font-size:32px;font-weight:500;margin:12px 0}
.mini-home-link p{max-width:600px;color:var(--muted);font-size:15px}
.mini-home-link>a{flex-shrink:0;font-size:14px;color:var(--blue)}
@media(max-width:700px){.mini-intro{text-align:left;font-size:16px}.mini-study{grid-template-columns:1fr;gap:28px}.mini-study-heading h2{font-size:30px}.mini-home-link{display:block;padding:40px 0}.mini-home-link>a{margin-top:24px}.mini-results{gap:16px}.mini-results dd{font-size:25px}}
@media(prefers-reduced-motion:reduce){.mini-detail summary span{transition:none}}

.mini-coming-soon{display:inline-flex;padding:8px 12px;margin-bottom:20px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);background:var(--section-background)}

/* Wishlist: a compact product ownership story with expandable evidence. */
.wishlist-case{padding-bottom:var(--case-section-space)}
.wishlist-intro{padding-bottom:40px}
.wishlist-highlights,.wishlist-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wishlist-highlights dt,.wishlist-usage dt{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue)}
.wishlist-highlights dd,.wishlist-usage dd{font-size:clamp(24px,3vw,34px);line-height:1.25;letter-spacing:-.03em;font-weight:500;margin:12px 0;color:var(--ink)}
.wishlist-highlights p{font-size:14px;color:var(--muted);margin:0;line-height:1.7}
.wishlist-story{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--case-intro-gap);padding:56px 0}
.wishlist-case h3{font-size:clamp(23px,2.5vw,30px);line-height:1.25;font-weight:500;letter-spacing:-.025em;margin:16px 0 20px}
.wishlist-story p:not(.cover-label),.wishlist-capabilities p{font-size:16px;color:var(--muted);line-height:1.8}
.wishlist-story>div>p:first-child{margin-top:0}
.wishlist-capabilities{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--section-background);padding:32px;border-radius:16px}
.wishlist-capabilities h3{font-size:22px}
.wishlist-capabilities p{margin-bottom:0}
.wishlist-evidence{padding-top:56px}
.wishlist-evidence-heading{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:24px}
.wishlist-evidence-heading p:not(.cover-label){font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.wishlist-usage{margin-bottom:32px}
.wishlist-case figure{margin:0;min-width:0}
.wishlist-case figure a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in}
.wishlist-case figure a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.wishlist-case figure img{display:block;width:100%;height:auto}
.wishlist-case figcaption{font-size:12px;color:var(--muted);line-height:1.7;margin-top:14px}
.wishlist-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.wishlist-credit{font-size:12px;color:var(--muted);padding-top:28px;margin-top:36px;border-top:1px solid var(--line)}
.wishlist-credit a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.wishlist-highlights,.wishlist-usage{gap:20px}.wishlist-highlights{grid-template-columns:1fr}.wishlist-highlights>div+div{border-top:1px solid var(--line);padding-top:20px}.wishlist-story,.wishlist-evidence-heading,.wishlist-capabilities,.wishlist-gallery{grid-template-columns:1fr;gap:20px}.wishlist-story{padding:36px 0}.wishlist-capabilities{padding:24px}.wishlist-evidence{padding-top:36px}.wishlist-usage dd{font-size:26px}.wishlist-usage dt{font-size:10px;letter-spacing:.5px}.wishlist-evidence-heading h3{margin-bottom:0}}

/* Editorial index for smaller, independently linked project stories. */
.mini-index{padding-top:32px;padding-bottom:var(--case-section-space)}
a.mini-index-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--section-background);text-decoration:none;color:var(--ink);transition:border-color .25s,transform .25s}
.mini-index-image{border-radius:12px;overflow:hidden;background:#fff}
.mini-index-image img{display:block;width:100%;height:auto;transition:transform .4s}
.mini-index-copy h2{font-size:clamp(25px,3vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:18px 0}
.mini-index-copy>p:not(.cover-label){font-size:16px;line-height:1.75;color:var(--muted)}
.mini-index-facts{display:flex;flex-wrap:wrap;gap:10px 20px;margin:24px 0;font-size:12px;color:var(--muted)}
.mini-index-cta{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--blue)}
a.mini-index-card:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
@media(hover:hover){a.mini-index-card:hover{border-color:var(--blue);transform:translateY(-3px)}a.mini-index-card:hover img{transform:scale(1.025)}}
@media(max-width:700px){a.mini-index-card{grid-template-columns:1fr;gap:24px;padding:20px;border-radius:16px}.mini-index-copy>p:not(.cover-label){font-size:15px}.mini-index{padding-top:20px}}
@media(prefers-reduced-motion:reduce){a.mini-index-card,.mini-index-image img{transition:none}a.mini-index-card:hover,a.mini-index-card:hover img{transform:none}}

.mini-index-image,.mini-index-copy{min-width:0}

/* Interactive homepage light sculpture. */

.sculpture-preview:after{display:none}
.sculpture-preview{isolation:isolate}
.sculpture-canvas{position:absolute;inset:-85px -10% -65px;width:120%;height:calc(100% + 150px);z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,#000 12%,#000 80%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 80%,transparent)}
.sculpture-preview h1{text-shadow:0 2px 12px #101114,0 0 38px #101114}
.sculpture-preview .text-intro-bottom p{text-shadow:0 1px 8px #101114,0 0 18px #101114}
.sculpture-hint{font-size:10px;color:#8b9cae;letter-spacing:1.3px;text-transform:uppercase;text-align:right;margin:28px 0 0;pointer-events:none}
@media(max-width:700px){.sculpture-canvas{inset:-50px -20px 0;width:calc(100% + 40px);height:calc(100% + 50px);opacity:.72}.sculpture-hint{font-size:9px;margin-top:22px}}
@media(prefers-reduced-motion:reduce){.sculpture-hint{display:none}}

/* Keep the sculpture secondary to the homepage headline. */
.sculpture-canvas{opacity:.68}
@media(max-width:700px){.sculpture-canvas{opacity:.45}}

/* Fade all canvas boundaries so the sculpture never meets a hard crop. */
.sculpture-canvas{mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.35) 74%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 30%,rgba(0,0,0,.9) 52%,rgba(0,0,0,.35) 74%,transparent 96%)}

/* Wishlist follows the shared project rhythm: context, product, ownership, evidence. */
.wishlist-brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--case-intro-gap);padding:40px 0;border-top:1px solid var(--line)}
.wishlist-brief h2{font-size:clamp(28px,3.2vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin:18px 0 0;max-width:17ch}
.wishlist-brief-copy p{font-size:16px;line-height:1.8;color:var(--muted);margin:20px 0 0;max-width:58ch}
.wishlist-brief-copy p.large{font-size:clamp(19px,2vw,23px);line-height:1.6;color:var(--ink);margin-top:0}
.wishlist-page .wishlist-highlights{padding:26px 0;gap:28px}
.wishlist-page .wishlist-highlights dd{margin-bottom:0;font-size:clamp(24px,2.6vw,32px)}
.wishlist-cost-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.wishlist-contribution{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--case-intro-gap);padding:var(--case-section-space) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wishlist-contribution-heading h3{max-width:21ch}
.wishlist-contribution-heading>p:last-child{font-size:15px;line-height:1.8;color:var(--muted);max-width:43ch;margin:24px 0 0}
.wishlist-responsibilities{margin:0}
.wishlist-responsibilities>div{padding:24px 0;border-top:1px solid var(--line)}
.wishlist-responsibilities>div:first-child{padding-top:0;border:0}
.wishlist-responsibilities>div:last-child{padding-bottom:0}
.wishlist-responsibilities dt{font-size:18px;font-weight:500;line-height:1.4;color:var(--ink)}
.wishlist-responsibilities dd{font-size:15px;line-height:1.8;color:var(--muted);margin:10px 0 0;max-width:56ch}
.wishlist-page .wishlist-evidence{padding-top:var(--case-section-space)}
@media(max-width:700px){.wishlist-brief,.wishlist-contribution{grid-template-columns:1fr;gap:24px}.wishlist-brief{padding:28px 0}.wishlist-brief h2,.wishlist-contribution-heading h3{max-width:24ch}.wishlist-brief-copy p{font-size:16px}.wishlist-contribution-heading>p:last-child{max-width:none}.wishlist-page .wishlist-highlights{gap:16px}.wishlist-page .wishlist-highlights>div+div{padding-top:16px}.wishlist-page .wishlist-highlights dd{font-size:27px}.wishlist-responsibilities>div{padding:20px 0}}

/* Production screens are grouped separately from the illustrative demo. */
.wishlist-product{padding-top:var(--case-section-space)}
.wishlist-product figcaption strong{color:var(--ink);font-weight:500}
.wishlist-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
.wishlist-product-details>div{padding-top:16px}
@media(max-width:700px){.wishlist-product-grid{grid-template-columns:1fr;gap:28px}}

.fieldnotes-page .header{background:transparent}
.fieldnotes-page .nav-indicator{transform:translateX(0)}

/* Project cards share one hover target and a restrained accent transition. */
a.work-card,a.work-card *,a.mini-index-card,a.mini-index-card *{cursor:pointer}
.work-card h3,.mini-index-copy h2{transition:color .28s cubic-bezier(.2,.7,.2,1)}
.work-card .project-arrow{transition:color .28s ease,background-color .28s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
.work-card:focus-visible h3{color:color-mix(in srgb,rgb(var(--card-rgb)) 25%,#f4f3ef)}
a.mini-index-card:focus-visible h2{color:var(--blue)}
.work-card:focus-visible .project-arrow{transform:translate(2px,-2px);color:rgb(var(--card-rgb));background:rgba(var(--card-rgb),.12)}
@media(hover:hover){
 .work-card:hover h3{color:color-mix(in srgb,rgb(var(--card-rgb)) 25%,#f4f3ef)}
 a.mini-index-card:hover h2{color:var(--blue)}
 .work-card:hover .project-arrow{transform:translate(2px,-2px);color:rgb(var(--card-rgb));background:rgba(var(--card-rgb),.12)}
}
@media(prefers-reduced-motion:reduce){
 .work-card h3,.mini-index-copy h2,.work-card .project-arrow{transition:none}
 .work-card:is(:hover,:focus-visible) .project-arrow{transform:none}
}
.motion-off .work-card h3,.motion-off .mini-index-copy h2,.motion-off .work-card .project-arrow{transition:none}
.motion-off .work-card:is(:hover,:focus-visible) .project-arrow{transform:none}

/* Native select semantics with a consistently inset SVG chevron. */
.button-examples .demo-state-control select{appearance:none;-webkit-appearance:none;padding:10px 42px 10px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8e3ec' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;cursor:pointer}
.button-examples .cta-specimen .app-cta{gap:8px}
.button-examples .app-cta svg{flex:none}