/* Portfolio colour and shared UI. */
:root{--accent:#FF385C;--ink:#172033;--muted:#526078;--pink:var(--accent);--red:var(--accent)}body{color:var(--ink)}a:focus-visible{outline-color:var(--accent)}.header{display:flex;justify-content:space-between;max-width:1156px;min-height:96px;margin:0 auto;border:0;border-radius:0;padding:28px 0;gap:32px}.header .brand{order:-1;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.3px}.header .brand-mark{width:40px;height:40px;flex-shrink:0}.header nav{font-size:16px;gap:28px}.header nav a{font-weight:500}.header nav a:hover{color:var(--accent)}.header .nav-contact{display:none}.landing-monochrome{--ink:#172033;--pink:#FF385C;color:var(--ink)}.landing-monochrome .landing-header nav a:first-child{font-weight:600}.landing-monochrome .home-hero h1{color:#172033;max-width:1020px}.hero-description{color:#526078}.landing-monochrome .project-art{border-radius:24px;padding:26px;background:#edf2ff}.landing-monochrome .project-art img{filter:none}.landing-monochrome .project-art.allianz{background:#e8f3ff}.landing-monochrome .project-art.wpp{background:#f3ebfa}.landing-monochrome .project-art.bbr{background:#edf4ee}.landing-monochrome .project-art.rated-people{background:#f1f1f1}.landing-monochrome .project-art.hsbc{background:#fbeeee}.landing-monochrome .project-art.national-lottery{background:#eaf0ff}.landing-monochrome .project-art.britishgas{background:#e7f5fe}.landing-monochrome .project-art.defra{background:#edf4ee}.landing-monochrome .project-art.barclays{background:#e9f5fb}.project-copy>p{color:#526078}.landing-monochrome .row-link{color:var(--accent);font-weight:600}.landing-monochrome .project-row:hover h2{color:var(--accent);text-decoration:none}.landing-monochrome .contact{background:#f1f5ff;border:0;border-radius:24px;max-width:1156px;margin-top:112px;margin-bottom:64px}.landing-monochrome .contact .eyebrow{color:var(--accent)}.landing-monochrome .contact .email{color:var(--accent)}.landing-monochrome a:focus-visible{outline-color:var(--accent)}.landing-footer nav a:hover{color:var(--accent)}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover,.nav-contact:hover{background:#D92449}.button{border-radius:10px}.migrated-case,.wpp-case{--red:var(--accent)}.highlights{background:#f3f6fd}.highlights h2{font-family:'DM Sans',sans-serif;text-transform:none;color:var(--ink);font-size:28px}.highlights dt{font-family:'DM Sans',sans-serif;font-size:14px;color:var(--muted)}.highlights dd{font-family:'DM Sans',sans-serif;font-size:18px;color:var(--ink)}.highlights dl>div+div{border-color:#d5dfef}.story h2{color:var(--accent)}.contents a:hover{color:var(--accent)}.migration-about .eyebrow,.resume-page .eyebrow{color:var(--accent)}.migration-about h1,.resume-page h1{color:var(--ink)}.password-field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.resume-help a{color:var(--accent)}@media(max-width:1230px){body:not(.landing-monochrome) .header{margin:0 40px}.landing-monochrome .contact{margin-left:40px;margin-right:40px}}@media(max-width:700px){.header{flex-wrap:wrap;gap:18px}.header .brand{font-size:17px}.header .brand-mark{width:34px;height:34px}.header nav{width:auto;flex-wrap:wrap;gap:20px;font-size:14px}body:not(.landing-monochrome) .header{margin:0 24px;padding:24px 0}.landing-monochrome .landing-header{justify-content:space-between}.landing-monochrome .landing-header nav{gap:20px}.landing-monochrome .project-art{padding:20px;border-radius:18px}.landing-monochrome .contact{margin:72px 20px 40px;padding:52px 20px;border-radius:20px}.highlights dd{font-size:16px}}@media(max-width:400px){.landing-header .brand{font-size:16px}.header .brand-mark{width:32px;height:32px}}
/* Shared tablet and mobile navigation. */
.menu-toggle{display:none;width:44px;height:44px;padding:11px;border:1px solid #d5dfef;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;flex-shrink:0}.menu-toggle span{display:block;height:2px;width:20px;background:currentColor;margin:4px 0;transition:transform .15s,opacity .15s}.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media(max-width:900px){.header,.landing-monochrome .landing-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 20px}.header .brand{order:0}.menu-toggle{display:block;margin-left:auto}.header #primary-navigation{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:18px;padding:10px 0;border-top:1px solid #d5dfef}.header #primary-navigation.is-open{display:flex}.header #primary-navigation a{display:block;padding:12px 4px;font-size:16px;min-height:44px}.header #primary-navigation a:hover{background:#f3f6fd;border-radius:6px;text-decoration:none}}@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}
@media(max-width:900px){.header .brand{order:-1}.header #primary-navigation{order:1}}
/* Consistent deep-navy case-study section titles. */
.migrated-case .story h2,.migrated-case .story h3,.migration-body>h3,.migration-media>h3{color:#172033}
/* Hays contents pilot; enabled only by its contents template. */
.toc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;max-width:1280px;margin:48px auto 0;padding:0 40px;align-items:start}.toc-layout .migration-body{max-width:none;width:100%;padding:0;margin:0;min-width:0}.case-toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;border-right:1px solid #e0e6f0;padding-right:18px;font-family:'DM Sans',sans-serif}.case-toc summary{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#526078;list-style:none;pointer-events:none;padding:12px 10px 16px}.case-toc summary::-webkit-details-marker{display:none}.case-toc nav{display:flex;flex-direction:column;gap:3px;font-size:14px}.case-toc nav a{position:relative;padding:9px 12px 9px 16px;border-radius:6px;line-height:1.4;color:#526078}.case-toc nav a:hover{color:#172033;background:#f3f6fd;text-decoration:none}.case-toc nav a.is-active{color:#172033;font-weight:600;background:#eef4ff}.case-toc nav a.is-active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:#FF385C}.toc-layout .story{scroll-margin-top:32px}.toc-layout .story:focus{outline:none}@media(max-width:1000px){.toc-layout{display:block;max-width:1060px;margin-top:32px;padding:0 24px}.case-toc{position:static;max-height:none;overflow:visible;border:1px solid #d5dfef;border-radius:10px;padding:0;margin-bottom:24px;background:#fff}.case-toc summary{pointer-events:auto;cursor:pointer;list-style:none;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:#172033;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;min-height:48px}.case-toc summary::after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 4px 5px 14px}.case-toc details[open] summary::after{transform:rotate(225deg);margin-bottom:-4px}.case-toc nav{padding:0 12px 12px;max-height:340px;overflow:auto}.case-toc nav a{min-height:44px;display:flex;align-items:center}.case-toc summary:focus-visible{outline:2px solid #FF385C;outline-offset:3px;border-radius:10px}}
/* Shared case-study typography and quieter confidentiality note. */
.migrated-case .story h2{font-family:'DM Sans',Arial,sans-serif;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-.5px;text-transform:none;margin-bottom:24px}.migrated-case .story p,.migration-body p,.migration-body ul,.migration-body ol{font-family:'DM Sans',Arial,sans-serif;font-size:18px;line-height:1.7}.migrated-case .story h3,.migration-body h3{font-family:'DM Sans',Arial,sans-serif;font-weight:600}.migrated-case .case-heading h1{margin-top:0}.migrated-case .migration-note{font-family:'DM Sans',Arial,sans-serif;font-size:12px!important;line-height:1.55;color:rgba(255,255,255,.58);font-style:normal;max-width:460px}.migrated-case .light-hero .migration-note{color:rgba(23,32,51,.6)}.highlights .highlight-icon{font-size:40px;font-weight:200;line-height:1;color:#172033;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center}@media(max-width:700px){.migrated-case .story h2{font-size:28px}.migrated-case .story p,.migration-body p,.migration-body ul,.migration-body ol{font-size:17px}}

.contact .contact-linkedin{display:block;width:fit-content;margin:24px auto 0;font-size:18px;color:#172033;text-underline-offset:5px}

.hays-results{overflow-x:auto;margin:28px 0}.hays-results table{width:100%;border-collapse:collapse;font-size:16px;text-align:left}.hays-results th,.hays-results td{padding:16px;border-bottom:1px solid #d5ddec}.hays-results thead{background:#f3f5fa}.migration-body figure{margin:32px 0 44px}.migration-body figcaption{font-size:14px;line-height:1.6;color:#52617a;margin-top:12px}.migration-hero-art figcaption{display:none}

/* Homepage project grid and device framing */
.landing-monochrome .project-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 32px}
.landing-monochrome .project-row{display:flex;flex-direction:column;align-items:stretch;gap:24px;min-height:0;padding:0}
.landing-monochrome .project-art{position:relative;align-self:stretch;overflow:hidden;height:auto;aspect-ratio:4/3;padding:24px;display:flex;align-items:center;justify-content:center}
.landing-monochrome .project-copy{align-self:stretch}
.landing-monochrome .project-copy h2{font-size:clamp(22px,2.4vw,32px);max-width:none;margin-bottom:12px}
.landing-monochrome .project-copy>p{max-width:none}
.landing-monochrome .project-art.hsbc{padding:20px 20px 0;align-items:flex-end}
.landing-monochrome .project-art.hsbc img{height:auto;width:85%;max-width:none;flex:none}
.landing-monochrome .project-art.national-lottery img,.landing-monochrome .project-art.britishgas img,.landing-monochrome .project-art.allianz img{position:absolute;width:125%;height:auto;max-width:none;bottom:0;left:50%;transform:translate(-50%,14.3%)}
.landing-monochrome .project-art.britishgas img{width:114%;transform:translate(-50%,10.7%)}
.landing-monochrome .project-art.allianz img{width:112%;transform:translate(-50%,5.7%)}
.contact h1{font-family:'DM Sans',Arial,sans-serif;color:var(--ink);font-size:clamp(36px,5vw,56px);line-height:1.15;margin:20px 0 28px}
@media(max-width:599px){.landing-monochrome .project-rows{grid-template-columns:1fr;gap:56px}.landing-monochrome .project-row{gap:20px}.landing-monochrome .project-copy h2{font-size:28px}}
.landing-monochrome .project-art.national-lottery img,.landing-monochrome .project-art.britishgas img,.landing-monochrome .project-art.allianz img{top:auto}

/* Shared page chrome and spacing: one header and footer template. */
body .site-header,body.landing-monochrome .site-header{box-sizing:border-box;width:calc(100% - 48px);max-width:1156px;margin:0 auto;min-height:96px;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;border-radius:0}
.site-header .brand{order:-1}.site-header nav a:first-child{font-weight:600}
body .site-footer{font-family:'DM Sans',Arial,sans-serif;border-top:1px solid #e0e6f0;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;margin:0;color:#172033}
.site-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;font-size:16px}.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}.site-footer nav a:hover{color:var(--accent)}.site-footer p{margin:0;font:14px/1.5 'DM Sans',Arial,sans-serif;color:#526078}
.landing-monochrome .home-work{padding-bottom:96px}.project-copy .row-link{display:inline-block;margin-top:20px;line-height:1.5}
body .contact{max-width:1156px;margin:64px auto 96px;padding:72px 24px;background:#f1f5ff;border-radius:24px}.contact .email{overflow-wrap:anywhere}.contact .eyebrow,.contact .email{color:var(--accent)}
/* Larger phone previews rest on the tile base. */
.landing-monochrome .project-art.bbr,.landing-monochrome .project-art.hsbc,.landing-monochrome .project-art.barclays{padding:0;align-items:flex-end}
.landing-monochrome .project-art.bbr img{position:absolute;top:auto;bottom:0;left:50%;width:60%;height:auto;max-width:none;max-height:none;transform:translate(-50%,12.57%)}
.landing-monochrome .project-art.hsbc img{position:absolute;top:auto;bottom:0;left:50%;width:85%;height:auto;max-width:none;max-height:none;transform:translateX(-50%)}
.landing-monochrome .project-art.barclays img{position:absolute;top:auto;bottom:0;left:50%;width:100%;height:auto;max-width:none;max-height:none;transform:translateX(-50%)}
/* Existing laptop renders stay centred; unframed screens share a MacBook shell. */
.landing-monochrome .project-art.national-lottery,.landing-monochrome .project-art.britishgas,.landing-monochrome .project-art.allianz{padding:0}
.landing-monochrome .project-art.national-lottery img,.landing-monochrome .project-art.britishgas img,.landing-monochrome .project-art.allianz img{position:static;top:auto;bottom:auto;left:auto;width:112%;height:auto;max-width:none;max-height:none;transform:none;flex:none}
.macbook-preview{position:relative;width:100%;max-width:none;flex:none;padding-bottom:3%;filter:drop-shadow(0 12px 10px rgba(23,32,51,.12))}.macbook-screen{position:relative;width:88%;margin:0 auto;padding:3% 1.2% 1.5%;background:#15171b;border:2px solid #7f838b;border-radius:14px 14px 5px 5px}.macbook-screen::before{content:'';position:absolute;top:0;left:43%;width:14%;height:4%;background:#090a0c;border-radius:0 0 5px 5px;z-index:1}.macbook-viewport{aspect-ratio:1.6;overflow:hidden;background:#fff;border-radius:2px}
.landing-monochrome .project-art .macbook-viewport img{position:static;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center top;transform:none}
.macbook-base{position:relative;height:9px;border-radius:1px 1px 50% 50%;background:linear-gradient(#d5d7dd,#a7aab3 65%,#656973);margin-top:-1px}.macbook-base::before{content:'';display:block;width:15%;height:4px;margin:auto;border-radius:0 0 6px 6px;background:#8c9099}
@media(max-width:900px){body .site-header,body.landing-monochrome .site-header{flex-wrap:wrap;gap:0 20px}.site-header #primary-navigation{order:1}}
@media(max-width:700px){.landing-monochrome .home-work{padding-bottom:64px}body .contact{margin:32px 24px 64px;padding:48px 20px;border-radius:20px}.site-footer nav{gap:8px 24px}body .site-footer{padding:32px 24px}.macbook-screen{border-radius:8px 8px 3px 3px}.macbook-base{height:6px}}
.landing-monochrome .project-art.hsbc img{width:76%}

/* Side clearance for every homepage desktop preview. */
.landing-monochrome .project-art.desktop-preview{padding:clamp(16px,3vw,32px);align-items:center;justify-content:center}
.landing-monochrome .project-art.desktop-preview>img{width:100%;height:auto;max-width:100%;position:static;transform:none;object-fit:contain}
.landing-monochrome .project-art.desktop-preview .macbook-preview{width:100%;max-width:100%}

/* One centred desktop-cover component for every desktop project. */
.macbook-viewport{position:relative}
.landing-monochrome .project-art.allianz .macbook-viewport img{position:absolute;max-width:none;width:135.33%;height:135.63%;left:-16.39%;top:-17.75%;object-fit:fill}
.landing-monochrome .project-art.national-lottery .macbook-viewport img{position:absolute;max-width:none;width:152.23%;height:156.81%;left:-25.47%;top:-24.96%;object-fit:fill}
.landing-monochrome .project-art.britishgas .macbook-viewport img{position:absolute;max-width:none;width:136.29%;height:142.82%;left:-17.13%;top:-17.99%;object-fit:fill}
/* Visible phone artwork begins one fifth of the way down the tile. */
.landing-monochrome .project-art.bbr img,.landing-monochrome .project-art.hsbc img,.landing-monochrome .project-art.barclays img{top:20%;bottom:auto}
.landing-monochrome .project-art.bbr img{transform:translate(-50%,-5.4036%)}
.landing-monochrome .project-art.hsbc img{transform:translate(-50%,-3.734%)}
.landing-monochrome .project-art.barclays img{transform:translate(-50%,-16.111%)}


/* Shared centred title spread and separate design-preview spread. */
.migrated-case .case-title-page{display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 96px);padding:80px 24px;box-sizing:border-box;text-align:center}
.case-title-page .case-heading{width:100%;max-width:900px;margin:auto}.case-title-page .case-heading h1{font-size:clamp(48px,5vw,76px);line-height:1.1;margin:0 auto 32px;max-width:900px}.case-title-page .case-heading>p:not(.migration-note){max-width:760px;margin:0 auto;font-size:clamp(22px,2.2vw,28px);line-height:1.5}.migrated-case .case-title-page .migration-note{max-width:640px;margin:28px auto 0;text-align:center}
.case-design-page{display:flex;align-items:center;justify-content:center;min-height:100svh;background:#e8f3ff;padding:64px 32px;box-sizing:border-box}.case-design-page .migration-hero-art{align-self:auto;width:min(1100px,100%)}.case-design-page figure{margin:0}.case-design-page figure a{display:flex;align-items:center;justify-content:center}.case-design-page img{display:block;width:100%;height:auto;max-height:calc(100svh - 128px);object-fit:contain;margin:auto}.case-design-page figcaption{display:none}
@media(max-width:900px){.migrated-case .case-title-page{min-height:0;padding:72px 24px}.case-design-page{min-height:0;padding:56px 24px}.case-design-page img{max-height:70svh}.case-title-page .case-heading h1{font-size:clamp(38px,7vw,56px)}}

/* About follows the same typography and spacing as the shared case-study text. */
.migration-about{font-family:'DM Sans',Arial,sans-serif;color:var(--ink);max-width:760px;padding:64px 24px 96px}
.migration-about h1{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(36px,5vw,56px);font-weight:700;line-height:1.15;letter-spacing:-.5px;text-transform:none;margin:16px 0 32px}
.migration-about h2{font-family:'DM Sans',Arial,sans-serif;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-.5px;text-transform:none;color:var(--ink);margin:48px 0 24px}
.migration-about p:not(.eyebrow){font:400 18px/1.7 'DM Sans',Arial,sans-serif;color:var(--ink);margin:0 0 24px}
.migration-about .eyebrow{font:600 14px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:1px}
.migration-about a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.migration-about{padding:48px 24px 64px}.migration-about h2{font-size:28px;margin-top:40px}.migration-about p:not(.eyebrow){font-size:17px}}

/* Selected framed AH mark, without the header wordmark. */
.header .brand-mark{width:52px;height:52px;display:block}.header .brand{display:inline-flex;align-items:center}
@media(max-width:700px){.header .brand-mark{width:44px;height:44px}}

/* Minimal lowercase wordmark with a bright pink accent dot. */
.header .brand-mark{width:76px;height:auto;aspect-ratio:124/82}
@media(max-width:700px){.header .brand-mark{width:66px;height:auto}}

/* Rounded navy AH monogram selected from concept 03. */
.header .brand-mark{width:76px;height:auto;aspect-ratio:126/88}
@media(max-width:700px){.header .brand-mark{width:66px;height:auto}}

/* Ten percent smaller logo and clear current-page navigation. */
.header .brand-mark{width:68.4px;height:auto}
.header nav a,.site-header nav a:first-child,.landing-monochrome .landing-header nav a:first-child{font-weight:500}
.header nav a[aria-current=page],.site-footer nav a[aria-current=page]{font-weight:700}
@media(max-width:700px){.header .brand-mark{width:59.4px;height:auto}}

/* Extend the mark for its pink dot while preserving the AH letter size. */
.header .brand-mark{width:80.89px;height:auto;aspect-ratio:149/88}
@media(max-width:700px){.header .brand-mark{width:70.24px;height:auto}}