/* Selected project pages: the work leads, with a real phone capture alongside it. */
.project-story{padding-top:32px}
.story-heading .back-link{min-height:44px;font-size:13px;font-weight:500}
.story-title-row{display:grid;grid-template-columns:1.35fr 1fr;gap:60px;align-items:end;padding:36px 0 44px}
.story-title-row h1{font-size:clamp(64px,7.4vw,96px);line-height:.94;text-transform:uppercase;max-width:12ch;letter-spacing:-.025em}
.story-title-row h1:focus{outline:none}
.story-lead{max-width:440px;padding-bottom:3px}
.story-lead>p{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--ink);text-wrap:pretty}
.story-lead .button{margin-top:24px;min-height:52px;gap:28px;border-radius:6px;font-size:13px}
.project-story .story-hero{margin-block:0}
.story-showcase{position:relative;padding:clamp(32px,4.2vw,60px) clamp(28px,4.2vw,60px) 72px;background:var(--case-color);border-radius:12px;isolation:isolate}
.story-desktop{display:block;width:88%;overflow:hidden;border-radius:7px;box-shadow:0 20px 40px -12px #23231f40;background:#fff;transition:transform .25s ease}
.story-browser-bar{position:relative;height:30px;display:flex;align-items:center;gap:4px;padding-inline:12px;background:#fff;color:#656157}
.story-browser-bar>span{width:5px;height:5px;border-radius:50%;background:#cbc7bd}
.story-browser-bar b{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;font-weight:400;white-space:nowrap}
.story-desktop img{width:100%;height:auto}
.story-phone{display:block;position:absolute;right:3.5%;bottom:32px;width:21%;padding:8px;background:#23231f;border-radius:28px;box-shadow:0 18px 32px -10px #23231f50;overflow:hidden;transition:transform .25s ease}
.story-phone img{width:100%;height:auto;border-radius:20px;background:#fff}
.story-phone-speaker{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:24%;height:4px;border-radius:5px;background:#23231f;z-index:1}
.story-showcase-poster .story-desktop{width:60%;max-width:650px;margin-left:9%}
.story-showcase-poster .story-phone{bottom:60px}
.story-hero>figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:18px;font-size:12px;line-height:1.5;color:var(--muted)}
.story-hero>figcaption a{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--ink)}
.story-hero>figcaption svg{width:15px;height:15px}
.story-hero>figcaption a:hover{color:var(--red)}
.story-focus{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:center;padding-block:84px 96px}
.story-focus-copy h2{font-size:clamp(42px,4.3vw,60px);line-height:1;letter-spacing:-.02em}
.story-focus-copy p{font-size:16px;line-height:1.8;margin-top:24px;max-width:42ch;color:#59564e;text-wrap:pretty}
.story-focus-copy p.story-personal{margin-top:20px;color:var(--ink)}
.story-detail-shot{margin:0;min-width:0}
.story-detail-shot>a{display:block;overflow:hidden;border-radius:7px;box-shadow:0 14px 32px -10px #23231f28;transition:transform .25s ease}
.story-detail-shot img{width:100%;height:auto}
.story-detail-shot figcaption{margin-top:15px;font-size:12px;color:var(--muted)}
.story-testimonial{background:#eae4d8;border-block:1px solid var(--line)}
.story-testimonial>figure{position:relative;margin-block:0;padding-block:64px;display:grid;grid-template-columns:52px 1fr;column-gap:34px}
.story-testimonial .story-quote-mark{width:40px;height:40px;color:var(--red);margin-top:5px}
.story-testimonial blockquote{font-size:clamp(24px,2.5vw,36px);line-height:1.45;letter-spacing:-.025em;max-width:36ch;margin:0;color:var(--ink);white-space:pre-line;text-wrap:pretty}
.story-testimonial figcaption{grid-column:2;display:flex;align-items:center;gap:20px;margin-top:30px;font-size:15px;font-weight:600}
.story-client-image{width:88px;height:88px;object-fit:cover;border-radius:50%;background:var(--paper)}
.story-testimonial .story-client-logo{object-fit:contain;border-radius:8px;padding:8px;background:#fff}
.story-enquire{display:flex;justify-content:space-between;align-items:center;gap:36px;padding-block:72px}
.story-enquire h2{font-size:clamp(44px,5.2vw,72px);line-height:.97}
.story-starting-price{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;font-size:14px}
.story-starting-price svg{width:16px;height:16px}
.story-starting-price:hover{color:var(--red)}
.story-enquire>.button{border-radius:6px;font-size:14px;min-height:56px;gap:30px;flex:none}
.story-project-nav{display:grid;grid-template-columns:.75fr 1.25fr;align-items:stretch;border-top:1px solid var(--line);padding-block:26px 42px;gap:50px}
.story-all-projects{display:inline-flex;align-items:center;gap:12px;width:fit-content;min-height:44px;font-size:13px;font-weight:500}
.story-all-projects:hover{color:var(--red)}
.story-next-project{display:flex;align-items:center;gap:24px;padding-left:38px;border-left:1px solid var(--line)}
.story-next-project>span{display:block;flex:1;font-size:12px;color:var(--muted)}
.story-next-project strong{display:block;font-family:var(--display);font-size:clamp(26px,3vw,40px);line-height:1.1;font-weight:600;text-transform:uppercase;margin-top:7px;color:var(--ink)}
.story-next-project img{width:136px;height:88px;object-fit:cover;object-position:top;border-radius:4px}
.story-next-project>svg{width:24px;height:24px}
.story-next-project:hover strong{color:var(--red)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.story-desktop:hover,.story-detail-shot>a:hover{transform:translateY(-4px)}.story-phone:hover{transform:translateY(-6px)}}
@media(max-width:1000px){.story-title-row{gap:35px;grid-template-columns:1.2fr 1fr}.story-title-row h1{font-size:76px}.story-showcase{padding:32px 30px 55px}.story-phone{border-radius:24px;padding:6px}.story-phone img{border-radius:18px}.story-focus{gap:35px;padding-block:65px}.story-focus-copy h2{font-size:44px}.story-focus-copy p{font-size:15px}.story-next-project img{width:100px;height:70px}.story-project-nav{gap:30px}.story-next-project{padding-left:26px;gap:18px}}
@media(max-width:700px){.project-story{padding-top:18px}.story-title-row{grid-template-columns:1fr;gap:22px;padding:24px 0 32px}.story-title-row h1{font-size:clamp(56px,12.5vw,80px);max-width:13ch}.story-lead{max-width:36ch}.story-lead>p{font-size:16px}.story-lead .button{margin-top:20px;min-height:50px;padding:14px 18px}.story-showcase{padding:24px 20px 26px}.story-desktop{width:100%;border-radius:5px}.story-browser-bar{height:22px;padding-inline:8px}.story-browser-bar b{font-size:7px}.story-browser-bar>span{width:4px;height:4px}.story-phone{position:relative;width:43%;min-width:132px;right:auto;bottom:auto;margin:-38px 2px 0 auto;padding:5px;border-radius:19px}.story-phone img{border-radius:14px}.story-phone-speaker{top:8px;height:3px}.story-hero>figcaption{font-size:10px;gap:6px;padding-top:12px;align-items:flex-start;flex-direction:column}.story-hero>figcaption a{min-height:30px;font-size:11px}.story-focus{grid-template-columns:1fr;gap:30px;padding-block:42px 50px}.story-focus-copy h2{font-size:clamp(38px,9.5vw,50px)}.story-focus-copy p{font-size:15px;line-height:1.75;max-width:48ch;margin-top:20px}.story-detail-shot figcaption{font-size:11px;margin-top:12px}.story-testimonial>figure{padding-block:40px;grid-template-columns:1fr;gap:20px}.story-testimonial .story-quote-mark{width:28px;height:28px;margin:0}.story-testimonial blockquote{font-size:25px;line-height:1.5;max-width:none}.story-testimonial figcaption{grid-column:1;margin-top:5px;gap:16px;font-size:14px}.story-client-image{width:72px;height:72px}.story-enquire{align-items:flex-start;flex-direction:column;gap:20px;padding-block:46px}.story-enquire h2{font-size:clamp(42px,10vw,56px)}.story-starting-price{font-size:13px;margin-top:12px}.story-enquire>.button{min-height:52px;font-size:13px}.story-project-nav{grid-template-columns:1fr;gap:20px;padding-block:18px 30px}.story-next-project{border-left:0;border-top:1px solid var(--line);padding:24px 0 0;gap:18px}.story-next-project img{width:96px;height:66px}.story-next-project strong{font-size:30px}.story-next-project>svg{width:20px;height:20px}}
@media(max-width:360px){.story-title-row h1{font-size:54px}.story-showcase{padding-inline:14px}.story-testimonial blockquote{font-size:23px}.story-next-project img{width:76px;height:58px}.story-next-project strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.story-desktop,.story-phone,.story-detail-shot>a{transition:none}}
@media(max-width:700px){.story-showcase-poster .story-desktop{width:100%;max-width:none;margin-left:0}.story-showcase-poster .story-phone{bottom:auto;width:48%;margin:24px auto 0}}