@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:Lato,'Segoe UI',Arial,sans-serif;color:#20352E;font-weight:300;font-size:16px;--purple:#183D35;--blue:#183D35;--gradient:#183D35}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #183D35;outline-offset:5px}p{line-height:1.55;margin:0 0 16px}h1,h2,h3{font-weight:400;margin:0}h2{font-size:38px;line-height:1.15;background:var(--gradient);background-clip:text;color:transparent;margin-bottom:28px}h3{font-size:20px;line-height:1.35}section{padding:96px 0}.wrap{max-width:1250px;width:calc(100% - 96px);margin:auto}.gradient{background:var(--gradient);color:white}.gradient h2{background:none;color:white}nav{display:flex;align-items:center;justify-content:space-between;padding-top:32px}.brand{text-transform:uppercase;font-size:12px;letter-spacing:1.3px;font-weight:700;text-decoration:none}#menu{display:flex;gap:32px;font-size:14px}.menu-toggle{display:none}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;padding:262px 0 64px}.hero>div{max-width:600px}h1{font-size:68px;line-height:1.1;letter-spacing:-1.6px;margin-bottom:16px}.hero p{font-size:20px;margin:0}.tags{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-shrink:0}.tags li{font-weight:400;font-size:12px;background:white;color:#183D35;border-radius:30px;padding:10px 16px;white-space:nowrap}.split{display:grid;grid-template-columns: .9fr 1.1fr;gap:95px}.lead{font-size:18px;font-weight:500}.split h2{max-width:500px}.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}.capabilities article{padding:26px 24px;background:#E9E8DC;border-radius:12px}.capabilities h3{color:var(--purple);margin-bottom:16px}.capabilities p{margin:0}.tint{background:#F5F3EB}.section-subtitle{margin-top:-20px;margin-bottom:44px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.work-card{padding:30px;border:1px solid #D9D2C6;border-radius:12px;background:#fff;min-height:390px}.work-card h3{font-size:22px;margin-bottom:20px}blockquote{font-weight:400;font-size:16px;line-height:1.45;border-left:3px solid #183D35;padding:12px 0 12px 16px;margin:0 0 24px}.text-link{border:0;background:none;padding:0;text-decoration:underline;color:#20352E;font-size:14px;font-weight:400}.leadership-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:120px}.statement{font-size:22px;font-weight:400;line-height:1.4;margin-bottom:24px}.principles{list-style:none;margin:0;padding:0}.principles li{position:relative;padding:28px 0 28px 26px;border-bottom:1px solid #D9D2C6}.principles li:first-child{padding-top:10px}.principles li:last-child{border:0}.principles li:before{content:'•';color:#183D35;position:absolute;left:0;font-size:24px;line-height:1}.principles h3{font-size:18px;margin-bottom:4px}.principles p{margin:0;font-size:16px}.about-grid{display:grid;grid-template-columns:1.4fr .9fr;align-items:center;gap:90px}.about-grid img{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 28px #17173012}.about-grid p:last-child{margin:0}footer{padding:86px 0 30px}.contact-grid{display:flex;justify-content:space-between;align-items:center;gap:60px}.contact-grid>div{max-width:780px}.contact-grid p{font-size:20px;margin:0}.pill{border:0;background:white;color:#183D35;border-radius:50px;padding:16px 30px;white-space:nowrap;font-weight:400;text-decoration:none;display:inline-block}.footer-line{display:flex;justify-content:space-between;font-size:12px;border-top:1px solid #ffffff25;margin-top:64px;padding-top:28px}.skip{position:absolute;top:-70px;background:white;padding:15px;z-index:10}.skip:focus{top:0}dialog{border:1px solid #D9D2C6;border-radius:12px;padding:40px;max-width:650px;width:calc(100% - 40px);max-height:85vh;box-shadow:0 20px 100px #0003}dialog::backdrop{background:#20352E88}.close{position:absolute;top:8px;right:14px;border:0;background:none;font-size:32px}.dismiss{border:0;border-radius:30px;padding:12px 24px;background:var(--gradient);color:white}dialog h2{font-size:28px;margin-right:16px}dialog p{font-size:16px}
@media(min-width:1600px){.hero{padding-top:280px}}@media(max-width:1150px){.hero{gap:30px;flex-wrap:wrap;padding-top:180px}.hero>div{max-width:650px}.tags{flex-wrap:wrap}.split,.leadership-grid{gap:50px}.about-grid{gap:50px}h1{font-size:60px}}@media(max-width:650px){.wrap{width:calc(100% - 40px)}nav{padding-top:24px}.brand{font-size:10px;letter-spacing:1px}.menu-toggle{display:flex;width:44px;height:44px;border:0;background:none;flex-direction:column;justify-content:center;gap:5px;padding:12px;color:white}.menu-toggle span{height:2px;width:20px;background:currentColor}#menu{display:none;position:absolute;top:76px;left:20px;right:20px;background:#20352E;border:1px solid #ffffff60;border-radius:8px;padding:20px;z-index:5;flex-direction:column;gap:0;font-size:16px}#menu.open{display:flex}#menu a{padding:12px 0}.hero{display:block;padding:36px 0 44px}.hero>div{max-width:none}h1{font-size:48px;letter-spacing:-.8px;margin-bottom:14px}.hero p{font-size:16px;line-height:1.5}.tags{margin-top:22px;gap:8px}.tags li{font-size:10px;padding:8px 14px}section{padding:64px 0}h2{font-size:28px;margin-bottom:24px}.split,.capabilities,.work-grid,.leadership-grid,.about-grid{grid-template-columns:1fr;gap:0}.desktop{display:none}.lead{font-size:16px}.split h2{margin-bottom:24px}.capabilities{margin-top:32px;gap:16px}.capabilities article{padding:24px}.capabilities h3{font-size:20px;margin-bottom:14px}.work-grid{gap:20px}.section-subtitle{margin-top:-12px;margin-bottom:36px;font-size:14px}.work-card{padding:24px;min-height:0}.work-card h3{font-size:20px}.work-card p{font-size:16px}.text-link{font-size:14px;padding:8px 0}.statement{font-size:20px}.principles{margin-top:24px;border-top:1px solid #D9D2C6}.principles li:first-child{padding-top:28px}.principles h3{font-size:16px}.principles p{font-size:16px}.about-grid img{margin-top:32px}.about-grid p{font-size:16px}footer{padding:64px 0 30px}.contact-grid{display:block}.contact-grid p{font-size:16px}.pill{margin-top:24px;padding:12px 24px;font-size:14px}.footer-line{flex-direction:column;gap:20px;margin-top:40px;font-size:12px}dialog{padding:30px 24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Full-screen mobile navigation, matching the supplied design. */
#mobile-navigation{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;color:#222;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
#mobile-navigation::backdrop{background:#fff}
.mobile-menu-header{height:56px;background:var(--gradient);display:flex;justify-content:flex-end;align-items:center;padding:0 20px}
.mobile-menu-close{position:relative;width:44px;height:44px;background:none;border:0;padding:0;color:#fff}
.mobile-menu-close span{position:absolute;left:6px;top:21px;width:32px;height:2px;background:currentColor;transform:rotate(45deg)}
.mobile-menu-close span:last-child{transform:rotate(-45deg)}
#mobile-navigation .mobile-menu-links{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:36px 20px 40px;gap:0}
.mobile-menu-links a{display:flex;align-items:center;min-height:64px;padding:20px 0;border-top:1px solid #D9D2C6;font-size:20px;line-height:1.2;font-weight:400;text-decoration:none}
@media(max-width:650px){#menu{display:none!important}}

/* Align introductory copy with the two equal capability columns. */
@media(min-width:651px){.intro .split{grid-template-columns:1fr 1fr;gap:20px}}

@media(min-width:651px){.leadership-grid{grid-template-columns:1fr 1fr;gap:20px}}

.tags li{font-size:14px}
.footer-line{font-size:14px}
.work-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:24px}
@media(max-width:650px){.tags li{font-size:12px}.footer-line{font-size:14px}}

#dialog-body .coming-soon { font-weight: 500; }

.footer-linkedin { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-linkedin:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkedin-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Contact form */
#contact-dialog { border-radius: 12px; }
#contact-form { display: grid; gap: 10px; }
#contact-form label { font-size: 16px; font-weight: 400; margin-top: 8px; }
#contact-form input, #contact-form textarea { width: 100%; min-width: 0; border: 1px solid #BEB6A9; border-radius: 6px; padding: 12px; font: inherit; font-size: 16px; font-weight: 400; color: #20352E; background: #fff; }
#contact-form textarea { resize: vertical; min-height: 140px; }
#contact-form input:focus-visible, #contact-form textarea:focus-visible { outline: 2px solid #183D35; outline-offset: 2px; }
#contact-form .form-honeypot { display: none; }
.send-message { justify-self: start; margin-top: 14px; border: 0; border-radius: 30px; padding: 12px 24px; background: var(--gradient); color: #fff; font-weight: 400; }
.send-message:disabled { opacity: .65; cursor: wait; }
#contact-status { margin: 20px 0 0; font-size: 16px; font-weight: 400; }
#contact-status:empty { display: none; }
#contact-status[data-state="error"] { color: #a72424; }
#contact-dialog [hidden] { display: none !important; }

/* Consistent spacing beneath all text links, including hover and focus. */
a, a:hover, a:focus-visible, .text-link, .text-link:hover, .text-link:focus-visible { text-underline-offset: 3px; }

/* Mobile supporting copy */
@media(max-width:650px){.section-subtitle,.principles p{font-size:16px}}
/* Use the same underline layer in both states so its position stays fixed. */
a:not(.pill):not(.skip):not(.footer-linkedin), .text-link, .footer-linkedin span {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 3px;
  text-decoration: none;
  transition: color .2s ease;
}
a:not(.pill):not(.skip):not(.footer-linkedin):hover,
a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible,
.text-link:hover, .text-link:focus-visible {
  color: #183D35;
  text-decoration: none;
  animation: link-underline-sweep .3s ease both;
}
.gradient a:not(.pill):hover, .gradient a:not(.pill):focus-visible { color: #fff; }
.footer-linkedin, .footer-linkedin:hover, .footer-linkedin:focus-visible {
  background: none;
  text-decoration: none;
  padding-bottom: 0;
  animation: none;
}
.footer-linkedin:hover span, .footer-linkedin:focus-visible span {
  animation: link-underline-sweep .3s ease both;
}
.footer-linkedin .linkedin-icon { color: #fff; }
.mobile-menu-links a:not(.pill):not(.skip):not(.footer-linkedin) { background-size: 0% 1px; }
@keyframes link-underline-sweep { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }
@media(prefers-reduced-motion:reduce){
  a:not(.pill):not(.skip), .text-link { transition:none; }
  a:not(.pill):not(.skip):hover, a:not(.pill):not(.skip):focus-visible,
  .text-link:hover, .text-link:focus-visible,
  .footer-linkedin:hover span, .footer-linkedin:focus-visible span { animation:none; background-size:100% 1px; }
  .footer-linkedin:hover, .footer-linkedin:focus-visible { background:none; }
}

/* Contact button hover and keyboard focus */
#contact-button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
#contact-button:hover, #contact-button:focus-visible { background-color: #E4E7D8; color: #183D35; box-shadow: 0 6px 18px #20352E26; transform: translateY(-2px); }
#contact-button:active { transform: translateY(0); box-shadow: 0 2px 8px #20352E20; }
/* Keep footer links and their underlines at text width on mobile. */
@media(max-width:650px){.footer-line > a{align-self:flex-start;width:fit-content;max-width:100%}}
@media(prefers-reduced-motion:reduce){#contact-button{transition:none}#contact-button:hover,#contact-button:focus-visible,#contact-button:active{transform:none}}

/* White text links on the header and footer gradients. Specificity matches the general hover rule. */
.gradient a:not(.pill):not(.skip):not(.footer-linkedin):hover,
.gradient a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible,
.gradient .footer-linkedin:hover, .gradient .footer-linkedin:focus-visible { color: #fff; }
/* Keep the border in both states to prevent button size changes. */
#contact-button { border: 1px solid #fff; }
#contact-button:hover, #contact-button:focus-visible {
  background: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: none;
  transform: none;
}
#contact-button:active { background: #ffffff14; box-shadow:none; transform:none; }

.principles p { font-size: 16px; }

/* Dialog actions retain their size while the hover border shows the header gradient. */
.dismiss {
  border: 1px solid transparent;
  background: var(--gradient) border-box;
  transition: color .2s ease;
}
.dismiss:hover, .dismiss:focus-visible {
  color: #20352E;
  background: linear-gradient(#fff, #fff) padding-box, var(--gradient) border-box;
}

/* Case studies share the portfolio's typography, colours and components. */
.study-hero{padding:96px 0 72px;max-width:1020px}
.study-back{display:inline-block;font-size:14px;margin-bottom:48px}
.study-eyebrow{font-size:14px;font-weight:400;letter-spacing:.5px;margin-bottom:20px}
.study-hero h1{font-size:64px;max-width:1000px;margin-bottom:28px}
.study-summary{font-size:22px;line-height:1.5;max-width:880px;margin-bottom:28px}
.study-hero .tags{flex-wrap:wrap}
.study-opening{padding-top:64px;padding-bottom:64px}
.study-figure{margin:0}
.study-figure img{display:block;width:100%;height:auto;border-radius:12px}
.study-figure figcaption{font-size:14px;color:#68645D;margin-top:14px;line-height:1.5}
.study-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:48px 0 0}
.study-metrics div{display:flex;flex-direction:column-reverse;gap:8px;border-left:2px solid #D9D2C6;padding-left:24px}
.study-metrics dt{font-size:16px;line-height:1.5}
.study-metrics dd{font-size:48px;line-height:1.1;font-weight:400;color:var(--purple);margin:0}
.study-section-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:80px}
.study-section h2{font-size:34px;max-width:360px}
.study-copy{max-width:720px;font-size:18px}
.study-copy p:last-child{margin-bottom:0}
.study-copy strong{font-weight:700}
.study-copy h3{margin:32px 0 20px;font-size:24px}
.study-list{padding-left:24px;line-height:1.6;margin:24px 0}
.study-list li{padding-left:4px;margin-bottom:12px}
.study-list li::marker{color:var(--purple)}
.study-section-image{margin-top:48px}
.study-table-scroll{overflow-x:auto;margin:24px 0 28px}
.study-table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.5;text-align:left}
.study-table caption{text-align:left;font-size:14px;color:#68645D;margin-bottom:12px}
.study-table th,.study-table td{padding:18px 16px;border-bottom:1px solid #D9D2C6;vertical-align:top}
.study-table th{font-weight:400}
.study-table thead{background:#E9E8DC}
.study-table td:last-child{color:#183D35}
.work-image-link{display:block}
a.work-image-link:not(.pill):not(.skip):not(.footer-linkedin){background:none;padding:0}
.work-image-link:hover .work-image{opacity:.9}
@media(max-width:1000px){.study-section-grid{grid-template-columns:1fr 1.5fr;gap:40px}.study-hero h1{font-size:54px}.study-section h2{font-size:30px}}
@media(max-width:650px){.study-hero{padding:32px 0 44px}.study-back{margin-bottom:32px}.study-eyebrow{font-size:12px}.study-hero h1{font-size:40px;letter-spacing:-.8px;margin-bottom:24px}.study-summary{font-size:18px}.study-opening{padding-top:32px;padding-bottom:40px}.study-metrics{grid-template-columns:1fr;gap:24px;margin-top:32px}.study-metrics div{padding-left:20px}.study-metrics dd{font-size:40px}.study-section-grid{grid-template-columns:1fr;gap:0}.study-section h2{max-width:none;font-size:28px}.study-copy{font-size:16px}.study-section-image{margin-top:32px}.study-table{font-size:14px;min-width:440px}.study-table th,.study-table td{padding:14px 12px}.study-figure img{border-radius:8px}}
/* Let the comparison table scroll within its column on narrow screens. */
.study-copy{min-width:0}

/* Current Carbs beta screens, presented within the case study layout. */
.carbs-screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:40px;background:#f1ede6;border-radius:12px}
.carbs-screen-label{margin:0 0 16px;font-size:14px;font-weight:500;color:#812e2d}
.carbs-screen-grid img{border:1px solid #dfd9cf;box-shadow:0 12px 28px #20352E12}
.case-study:has(.carbs-screen-grid) .study-metrics dd{font-size:32px}
.case-study:has(.carbs-screen-grid) .study-metrics div{display:grid;grid-template-rows:auto 1fr;align-content:start}
.case-study:has(.carbs-screen-grid) .study-metrics dd{grid-row:1}
.case-study:has(.carbs-screen-grid) .study-metrics dt{grid-row:2}
.carbs-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;align-items:start;gap:32px;padding:40px;background:#f1ede6;border-radius:12px}
.carbs-detail-grid.carbs-detail-three{grid-template-columns:repeat(3,minmax(0,300px))}
.carbs-detail-grid img{border:1px solid #dfd9cf;box-shadow:0 12px 28px #20352E12}
@media(max-width:1000px){.carbs-detail-grid{padding:24px;gap:20px}}
@media(max-width:650px){.carbs-detail-grid,.carbs-detail-grid.carbs-detail-three{grid-template-columns:minmax(0,300px);gap:28px;padding:24px}}
@media(max-width:1000px){.carbs-screen-grid{gap:20px;padding:24px}.carbs-screen-label{font-size:12px}}
@media(max-width:650px){.carbs-screen-grid{grid-template-columns:1fr;gap:28px;padding:24px}.carbs-screen-grid>div{width:100%;max-width:320px;margin-inline:auto}.carbs-screen-label{font-size:14px}.case-study:has(.carbs-screen-grid) .study-metrics dd{font-size:30px}}

/* A soft accent follows mouse movement without covering interactive content. */
.cursor-trail-dot{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 12px #183D3530;opacity:0;pointer-events:none;z-index:9999;transition:opacity .18s ease,background-color .18s ease,box-shadow .18s ease;will-change:transform}
.cursor-trail-dot.is-visible{opacity:.65}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-trail-dot{display:none}}

.cursor-trail-dot.is-on-gradient{background:#fff;box-shadow:0 0 12px #ffffff30}

.case-study-actions{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.case-study-actions .text-link{flex-shrink:0}
.case-study-access{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:400;color:#68645D;text-align:right;white-space:nowrap}
.padlock-icon{flex-shrink:0;vertical-align:middle}

/* Unauthorised case-study requests. */
.access-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.access-page header{padding-bottom:32px;flex-shrink:0}
.access-page footer{flex-shrink:0}
.access-main{background:#F5F3EB;flex:1}
.access-content{text-align:center;padding-top:72px;padding-bottom:80px;max-width:850px}
.access-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:400;color:#68645D;margin-bottom:20px}
.access-content h1{font-size:clamp(36px,5vw,56px);letter-spacing:-1px;margin-bottom:24px}
.access-copy{font-size:18px;max-width:580px;margin:0 auto 32px}
.access-actions{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.access-request{background:var(--gradient);color:white;margin:0}
.access-request:hover{box-shadow:0 6px 20px #183D3525}
.access-note{font-size:14px;color:#68645D;max-width:480px;margin:32px auto 0}
@media(max-width:650px){.access-page header{padding-bottom:24px}.access-content{padding-top:48px;padding-bottom:56px}.access-copy{font-size:16px}.access-actions{flex-direction:column;gap:24px}.access-note{margin-top:28px}}
.access-page .access-request{border-color:transparent;background:var(--gradient) border-box;color:white}
.access-page .access-request:hover,.access-page .access-request:focus-visible{color:#20352E;background:linear-gradient(#fff,#fff) padding-box,var(--gradient) border-box;border-color:transparent}
.access-page .access-request:active{background:var(--gradient) border-box;color:white}

/* Shared navigation to the other published case studies. */
.related-studies-header{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:32px}
.related-studies-header h2{margin-bottom:0}
.related-studies-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:24px;padding:0}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin){display:flex;flex-direction:column;overflow:hidden;border:1px solid #D9D2C6;border-radius:12px;background:#fff;color:#20352E;text-decoration:none;padding:0;animation:none}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):focus-visible{background:#fff;color:#20352E;animation:none}
.related-study-card>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.related-study-copy{display:flex;flex-direction:column;flex:1;padding:28px}
.related-study-category{font-size:14px;color:#68645D;margin-bottom:12px}
.related-study-copy h3{font-size:24px;line-height:1.3;margin-bottom:24px}
.related-study-action{align-self:flex-start;margin-top:auto}
.related-studies-footer{margin:32px 0 0}

/* Screenshot groups retain their desktop grids and swipe horizontally on mobile. */
.screenshot-carousel-controls{display:none}
.brand-mobile-carousel{display:none}
@media(max-width:650px){
  .carbs-brand-board{display:none!important}
  .carbs-screen-grid,.carbs-detail-grid,.carbs-detail-grid.carbs-detail-three{display:flex;justify-content:flex-start;align-items:flex-start;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;overscroll-behavior-x:contain;scrollbar-width:none}
  .carbs-screen-grid::-webkit-scrollbar,.carbs-detail-grid::-webkit-scrollbar{display:none}
  .carbs-screen-grid>div,.carbs-detail-grid>div{flex:0 0 100%;width:100%;max-width:none;margin:0;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .carbs-screen-grid>div>img,.carbs-detail-grid>div>img{max-width:320px;margin-inline:auto}
  .carbs-screen-grid .carbs-screen-label,.carbs-detail-grid .carbs-screen-label{max-width:320px;margin-inline:auto}
  .screenshot-carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
  .screenshot-carousel-controls button{min-height:44px;padding:10px 16px;border:1px solid #dfd9cf;border-radius:24px;background:#fff;color:#20352E;font-size:14px;font-weight:400}
  .screenshot-carousel-controls button:disabled{opacity:.4;cursor:default}
  .screenshot-carousel-status{margin:0;font-size:14px;font-weight:400;color:#68645D;white-space:nowrap}
}
@media(max-width:650px){.related-studies-header{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:24px}.related-studies-grid{grid-template-columns:1fr;gap:20px}.related-study-copy{padding:24px}.related-study-copy h3{font-size:22px}}

/* Access labels in shared case study cards. */
.related-study-actions{margin-top:auto;flex-wrap:wrap;align-items:center}
.related-study-actions .related-study-action{margin-top:0}

/* Swipeable related studies, with buttons and keyboard navigation. */
.related-carousel-controls[hidden]{display:none}
@media(max-width:650px){
  .related-studies-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px;scroll-padding-inline:6px;margin-inline:-6px}
  .related-studies-grid::-webkit-scrollbar{display:none}
  .related-study-card{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
}


.case-study-coming-soon{font-size:14px;font-weight:400;color:#68645D}


/* App performance metrics use the shared carousel controls on mobile. */
@media(max-width:650px){
  [data-metrics-carousel]{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px;scroll-padding-inline:6px;margin-inline:-6px}
  [data-metrics-carousel]::-webkit-scrollbar{display:none}
  [data-metrics-carousel]>div{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
}

/* Give metric slides a card treatment while the mobile carousel is active. */
@media(max-width:650px){
  [data-metrics-carousel]>div{background:#fff;border:1px solid #D9D2C6;border-radius:12px;padding:28px 24px;min-height:148px;justify-content:center;align-items:center;text-align:center;gap:12px}
}

/* Warm editorial: paper, ink and a restrained vermilion accent. */
:root{--paper:#F5F3EB;--ink:#20352E;--accent:#183D35;--rule:#D9D2C6}
body{background:var(--paper);color:var(--ink);font-weight:400}
h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400}
h2{background:none;color:var(--ink);letter-spacing:-.7px}
h3{font-weight:700;letter-spacing:-.3px}
#top{background:var(--paper);color:var(--ink);border-top:5px solid var(--accent);border-bottom:1px solid var(--rule);animation:none}
#top h2{color:var(--ink)}
.brand{color:var(--accent)}
.hero{padding-top:184px;padding-bottom:80px;align-items:flex-end}
.hero>div{max-width:740px}
.hero h1{font-size:clamp(56px,6.5vw,92px);line-height:1.02;letter-spacing:-3px}
.hero p{max-width:650px;line-height:1.55}
.tags{flex-wrap:wrap;max-width:340px;gap:8px}
.tags li{background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:9px 12px}
#top a:not(.pill):not(.skip):not(.footer-linkedin):hover,#top a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible{color:var(--accent)}
#top .menu-toggle{color:var(--ink)}
.capabilities article{background:#E9E8DC;border-radius:4px}
.capabilities h3{color:var(--ink)}
.work-card{border-color:var(--rule);border-radius:4px}
.work-image,.study-figure img,.about-grid img{border-radius:3px}
.work-card h3{font-size:24px;line-height:1.3}
blockquote{border-left:2px solid var(--accent)}
footer.gradient{background:var(--ink);color:var(--paper)}
footer.gradient h2{color:var(--paper)}
.pill{background:var(--accent);color:#fff;border-radius:4px}
#contact-button{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:4px}
#contact-button:hover,#contact-button:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#contact-button:active{background:#E9E8DC}
.dismiss,.send-message{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:4px}
.dismiss:hover,.dismiss:focus-visible{background:var(--paper);color:var(--accent)}
dialog,#mobile-navigation{background:var(--paper);color:var(--ink)}
.mobile-menu-header{background:var(--ink)}
#mobile-navigation::backdrop{background:var(--paper)}
.related-study-copy h3{font-weight:700}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin){border-radius:4px}
.cursor-trail-dot{background:var(--accent);box-shadow:none}
.cursor-trail-dot.is-on-gradient{background:var(--paper);box-shadow:none}
.access-page .access-request{background:var(--accent);border-color:var(--accent)}
.access-page .access-request:hover,.access-page .access-request:focus-visible{background:var(--paper);color:var(--accent);border-color:var(--accent)}
@media(max-width:1150px){.hero{padding-top:120px}}
@media(max-width:650px){.hero{padding:48px 0 44px}.hero h1{font-size:54px;letter-spacing:-1.8px}.hero p{font-size:18px}.tags{max-width:none}.work-card h3{font-size:22px}}

/* Forest and paper: botanical geometry and distinct chapter bands. */
:root{--paper:#F5F3EB;--ink:#20352E;--accent:#183D35;--ochre:#D6AD55;--rule:#CDD2C3}
#top{position:relative;isolation:isolate;overflow:hidden;background:#183D35;color:var(--paper);border-top:5px solid var(--ochre);border-bottom:0}
#top .wrap{position:relative;z-index:1}
#top:before,#top:after{content:'';position:absolute;pointer-events:none;z-index:0;width:420px;height:650px;border:1px solid #d6ad5545;border-radius:100% 0 100% 0;transform:rotate(28deg);right:-90px;top:-170px}
#top:after{right:80px;top:-230px;transform:rotate(48deg);border-color:#f5f3eb20}
#top .brand{color:var(--ochre)}
#top .menu-toggle,#top .tags li{color:var(--paper)}
#top .tags li{border-color:#f5f3eb50;background:#183d3580}
#top a:not(.pill):not(.skip):not(.footer-linkedin):hover,#top a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible{color:var(--ochre)}
.hero h1{color:var(--paper)}
main>section{border-bottom:1px solid var(--rule)}
.intro{background:var(--paper)}
#work{background:#E5E9DF}
#leadership{background:var(--paper)}
#about{background:#E9E5D9}
main>section h2:before{content:'';display:block;width:44px;height:3px;background:var(--ochre);margin-bottom:20px}
.capabilities article{background:#E5E9DF;border-top:2px solid #183d3540}
.work-card{border-color:#C8D0C0;box-shadow:0 3px 0 #183d3508}
footer.gradient{background:#183D35}
#contact-button{background:var(--ochre);border-color:var(--ochre);color:#20352E}
#contact-button:hover,#contact-button:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cursor-trail-dot.is-on-gradient{background:var(--ochre)}
@media(max-width:650px){#top:before,#top:after{width:260px;height:420px;right:-150px;top:20px}#top:after{right:-65px;top:-70px}}

/* Dark editorial: warm charcoal, ivory and brushed brass. */
:root{--paper:#191B1A;--ink:#EEECE5;--accent:#C5AD7B;--ochre:#C5AD7B;--rule:#3B3E39;--purple:#C5AD7B;--blue:#C5AD7B;--gradient:#C5AD7B;color-scheme:dark}
body{background:var(--paper);color:var(--ink)}
#top{background:#141615;color:var(--ink);border-top:3px solid var(--accent);border-bottom:1px solid var(--rule)}
#top:before{border-color:#c5ad7b30}#top:after{border-color:#eeece512}
#top .brand,#top a:not(.pill):not(.skip):not(.footer-linkedin):hover{color:var(--accent)}
#top .tags li{background:#ffffff04;border-color:#54564c;color:var(--ink)}
.hero h1,h2,#top h2,.capabilities h3{color:var(--ink)}
.intro,#leadership{background:#191B1A}
#work,.tint,.access-main{background:#202320}
#about{background:#242622}
main>section{border-color:var(--rule)}
.capabilities article{background:#222521;border-top-color:#C5AD7B70}
.work-card,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin),a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover{background:#191C19;border-color:#41443C;color:var(--ink);box-shadow:none}
.text-link,.close,.mobile-menu-links a{color:var(--ink)}
.case-study-access,.case-study-coming-soon,.related-study-category,.study-figure figcaption,.study-table caption,.access-label,.access-note,.screenshot-carousel-status{color:#B9BAB0}
.principles li,.principles{border-color:var(--rule)}
footer.gradient{background:#111310;color:var(--ink);border-top:1px solid var(--rule)}
footer.gradient h2{color:var(--ink)}
#contact-button,.pill,.dismiss,.send-message,.access-page .access-request{background:var(--accent);color:#191B1A;border:1px solid var(--accent)}
#contact-button:hover,#contact-button:focus-visible,.dismiss:hover,.dismiss:focus-visible,.access-page .access-request:hover{background:#EEECE5;color:#191B1A;border-color:#EEECE5}
.cursor-trail-dot{background:var(--accent)}
.study-metrics div,.study-table td,.study-table th{border-color:var(--rule)}
.study-table thead{background:#2D3029}.study-table td:last-child{color:var(--accent)}
[data-metrics-carousel]>div{background:#191C19;border-color:var(--rule)}
dialog,#mobile-navigation{background:#202320;color:var(--ink);border-color:var(--rule)}
#mobile-navigation::backdrop,.mobile-menu-header{background:#141615}
#contact-form input,#contact-form textarea{background:#141615;color:var(--ink);border-color:#626457}
.screenshot-carousel-controls button{background:#262923;color:var(--ink);border-color:#626457}
.skip{background:#EEECE5;color:#191B1A}
.case-study-cta{background:#262923;color:var(--ink);border-color:var(--rule)}
.case-study-cta:hover{background:#34382F}
.roadmap-principle,.roadmap-stage{background:#22251F;color:var(--ink);border-color:var(--rule)}
.roadmap-stage-current{background:#293025;border-color:#56634B}
.roadmap-icon{background:#39382C;color:var(--accent)}
.roadmap-status,.roadmap-note,.roadmap-dependency{color:#B9BAB0}
.roadmap-dependency strong{color:var(--ink)}
@media(max-width:650px){[data-metrics-carousel]>div{background:#191C19;border-color:var(--rule)}}

/* Graphic monochrome: crisp typography, hard rules and burnt orange. */
:root{--paper:#FFFFFF;--ink:#191919;--accent:#BD4B2D;--ochre:#BD4B2D;--rule:#D6D6D2;--purple:#BD4B2D;--blue:#BD4B2D;--gradient:#BD4B2D;color-scheme:light}
body{background:#fff;color:#191919}
h1,h2,h3{font-family:Lato,'Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:-.8px}
#top{background:#fff;color:#191919;border-top:6px solid #191919;border-bottom:2px solid #191919}
#top:before{width:240px;height:240px;right:36px;top:145px;border:1px solid #19191918;border-radius:0;transform:rotate(45deg)}
#top:after{width:140px;height:140px;right:-40px;top:235px;border:1px solid #bd4b2d30;border-radius:50%;transform:none}
#top .brand{color:#BD4B2D}
.hero h1,h2,#top h2,.capabilities h3{color:#191919}
.hero h1{letter-spacing:-3px}
#top .menu-toggle,#top .tags li{color:#191919}
#top .tags li{background:#fff;border-color:#191919;border-radius:0}
.intro,#leadership{background:#fff}
#work,.tint,.access-main{background:#F2F2EF}
#about{background:#E8E8E3}
main>section{border-color:#191919}
main>section h2:before{background:#BD4B2D;width:48px;height:4px}
.capabilities article{background:#F2F2EF;border-top:2px solid #191919;border-radius:0}
.work-card,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin),a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover{background:#fff;color:#191919;border-color:#BEBEB8;border-radius:0;box-shadow:none}
.work-image,.study-figure img,.about-grid img{border-radius:0}
.text-link,.close,.mobile-menu-links a{color:#191919}
.case-study-access,.case-study-coming-soon,.related-study-category,.study-figure figcaption,.study-table caption,.access-label,.access-note,.screenshot-carousel-status{color:#60605A}
.principles li,.principles{border-color:#BEBEB8}
footer.gradient{background:#191919;color:#fff;border-top:0}
footer.gradient h2{color:#fff}
#contact-button,.pill,.dismiss,.send-message,.access-page .access-request{background:#BD4B2D;color:#fff;border:1px solid #BD4B2D;border-radius:0}
#contact-button:hover,#contact-button:focus-visible{background:#fff;color:#191919;border-color:#fff}
.dismiss:hover,.dismiss:focus-visible,.access-page .access-request:hover{background:#fff;color:#BD4B2D;border-color:#BD4B2D}
.study-metrics div,.study-table td,.study-table th{border-color:#D6D6D2}
.study-table thead{background:#E8E8E3}.study-table td:last-child{color:#BD4B2D}
dialog,#mobile-navigation{background:#fff;color:#191919;border-color:#BEBEB8;border-radius:0}
#mobile-navigation::backdrop{background:#fff}.mobile-menu-header{background:#191919}
#contact-form input,#contact-form textarea{background:#fff;color:#191919;border-color:#888880;border-radius:0}
.screenshot-carousel-controls button{background:#fff;color:#191919;border-color:#888880;border-radius:0}
@media(max-width:650px){[data-metrics-carousel]>div{background:#fff;border-color:#BEBEB8;border-radius:0}.hero h1{letter-spacing:-2px}#top:before{right:-150px;top:100px}#top:after{right:-90px;top:240px}}

/* Chalk and oxblood editorial palette. */
:root{font-family:'DM Sans','Segoe UI',Arial,sans-serif;--paper:#F6F4EF;--ink:#25252B;--accent:#783C48;--ochre:#783C48;--rule:#D5CDCA;--purple:#783C48;--blue:#783C48;--gradient:#783C48;color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:'DM Sans','Segoe UI',Arial,sans-serif;font-weight:400}
h1,h2{font-family:'DM Serif Display',Georgia,serif;font-weight:600;letter-spacing:-.7px}
h3{font-family:'DM Sans','Segoe UI',Arial,sans-serif;font-weight:600;letter-spacing:-.3px}
#top{background:var(--paper);color:var(--ink);border-top:3px solid var(--accent);border-bottom:1px solid var(--rule)}
#top:before,#top:after{display:none}
.hero h1{color:var(--ink);font-family:'DM Serif Display',Georgia,serif;font-weight:600;letter-spacing:-2px}
#top h2,h2,.capabilities h3{color:var(--ink)}
#top .brand{color:var(--accent)}
#top .menu-toggle,#top .tags li{color:var(--ink)}
#top .tags li{background:transparent;border-color:var(--rule);border-radius:3px;font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase}
#menu{font-weight:500}
.intro,#leadership{background:var(--paper)}
#work,.tint,.access-main{background:#EDEEF4}
#about{background:#EDEEF4}
main>section{border-color:var(--rule)}
main>section h2:before{background:var(--accent);height:2px;width:36px}
.capabilities article{background:#EDEEF4;border-top:1px solid var(--rule);border-radius:4px}
.work-card,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin),a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover{background:#FDFCF9;color:var(--ink);border-color:var(--rule);border-radius:4px}
.work-card h3,.related-study-copy h3{font-weight:600}
.work-image,.study-figure img,.about-grid img{border-radius:3px}
.text-link,.close,.mobile-menu-links a{color:var(--ink)}
.case-study-access,.case-study-coming-soon,.related-study-category,.study-figure figcaption,.study-table caption,.access-label,.access-note,.screenshot-carousel-status{color:#6B6267}
.principles li,.principles{border-color:var(--rule)}
footer.gradient{background:var(--ink);color:var(--paper)}
footer.gradient h2{color:var(--paper)}
#contact-button,.pill,.dismiss,.send-message,.access-page .access-request{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:4px}
#contact-button:hover,#contact-button:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dismiss:hover,.dismiss:focus-visible,.access-page .access-request:hover{background:var(--paper);color:var(--accent);border-color:var(--accent)}
.study-table thead{background:#EDEEF4}.study-table td:last-child{color:var(--accent)}
.study-metrics div,.study-table td,.study-table th{border-color:var(--rule)}
dialog,#mobile-navigation{background:var(--paper);color:var(--ink);border-color:var(--rule);border-radius:4px}
#mobile-navigation::backdrop{background:var(--paper)}.mobile-menu-header{background:var(--ink)}
#contact-form input,#contact-form textarea{background:#FDFCF9;color:var(--ink);border-color:#A89B9D;border-radius:3px}
.screenshot-carousel-controls button{background:#FDFCF9;color:var(--ink);border-color:#A89B9D;border-radius:4px}
@media(max-width:650px){[data-metrics-carousel]>div{background:#FDFCF9;border-color:var(--rule);border-radius:4px}.hero h1{letter-spacing:-1.3px}}

/* Atmospheric moving colour, confined to the statement header. */
#top{background:#08091D;color:#F8F6F1;border-top:0;border-bottom:0;isolation:isolate}
#top:before{display:block;content:'';position:absolute;inset:-35%;width:auto;height:auto;right:-35%;top:-35%;border:0;border-radius:0;transform:none;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 25% 70%,#1646B5 0%,transparent 43%),radial-gradient(ellipse at 55% 35%,#1529DA 0%,transparent 48%),radial-gradient(ellipse at 85% 55%,#087E86 0%,transparent 35%),#08091D;filter:blur(45px);animation:statement-atmosphere 22s ease-in-out infinite alternate}
#top:after{display:block;content:'';position:absolute;inset:0;width:auto;height:auto;right:0;top:0;border:0;border-radius:0;transform:none;z-index:0;pointer-events:none;background:linear-gradient(90deg,#08091d80 0%,#08091d35 65%,#08091d15 100%)}
#top .wrap{position:relative;z-index:1}
#top .brand{color:#DFE9FB}
#top .hero h1{color:#F8F6F1;font-size:clamp(56px,7.5vw,104px);line-height:1.04}
#top .hero p{color:#F8F6F1;font-size:22px;line-height:1.5;max-width:650px}
#top .tags li{background:#08091d30;border-color:#ffffff65;color:#F8F6F1}
#top .menu-toggle{color:#F8F6F1}
#top a:not(.pill):not(.skip):not(.footer-linkedin):hover,#top a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible{color:#fff}
#top a:focus-visible,#top button:focus-visible{outline-color:#fff}
.cursor-trail-dot.is-on-gradient{background:#F8F6F1}
@keyframes statement-atmosphere{0%{transform:translate(-5%,2%) scale(1)}50%{transform:translate(4%,-5%) scale(1.08)}100%{transform:translate(8%,4%) scale(1.03)}}
@media(max-width:650px){#top:before{inset:-35%;width:auto;height:auto}#top:after{inset:0;width:auto;height:auto}#top .hero h1{font-size:54px}#top .hero p{font-size:18px}}
@media(prefers-reduced-motion:reduce){#top:before{animation:none;transform:none}}

/* Carry the header's atmosphere into quieter supporting details. */
:root{--accent:#173F87;--ochre:#173F87;--purple:#173F87;--blue:#24666B;--gradient:#173F87}
#top .brand{color:#DFE9FB}
main>section h2:before{background:linear-gradient(90deg,#173F87,#24666B);width:40px;height:3px}
blockquote{border-left-color:#173F87}
a:not(.pill):not(.skip):not(.footer-linkedin):hover,a:not(.pill):not(.skip):not(.footer-linkedin):focus-visible,.text-link:hover,.text-link:focus-visible{color:#173F87}
a:focus-visible,button:focus-visible,#contact-form input:focus-visible,#contact-form textarea:focus-visible{outline-color:#173F87}
#contact-button,.pill,.dismiss,.send-message,.access-page .access-request{background:#173F87;border-color:#173F87;color:#fff}
.dismiss:hover,.dismiss:focus-visible,.access-page .access-request:hover{color:#173F87;border-color:#173F87;background:var(--paper)}
.study-metrics dd,.study-table td:last-child,.study-list li::marker{color:#173F87}
.cursor-trail-dot{background:#173F87}
.cursor-trail-dot.is-on-gradient{background:#F8F6F1}
.work-image-link{position:relative;isolation:isolate;border-radius:3px}
.work-image-link:before{content:'';position:absolute;inset:12px;z-index:-1;border-radius:12px;background:linear-gradient(120deg,#173F8755,#24666B55);filter:blur(22px);opacity:0;transition:opacity .3s ease}
.work-image-link:hover:before,.work-image-link:focus-visible:before{opacity:1}
.work-image-link .work-image{transition:opacity .25s ease}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin){transition:box-shadow .3s ease}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover{box-shadow:0 8px 24px #173f8718}
footer.gradient{background:radial-gradient(ellipse at 90% 100%,#15434B88,transparent 65%),radial-gradient(ellipse at 5% 10%,#18345E99,transparent 65%),#151522;color:#F6F4EF}
footer.gradient h2{color:#F6F4EF}
#contact-button:hover,#contact-button:focus-visible{background:#F6F4EF;color:#25252B;border-color:#F6F4EF}
@media(prefers-reduced-motion:reduce){.work-image-link:before,.work-image-link .work-image,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin){transition:none}}

/* A cool backdrop ties the work section to the header colours. */
#work{background:#ECECF6;border-color:#D4D5E5}
#work .work-card{border-color:#D4D5E5}
/* Move the colour fields independently of the stable text layer. */
#top:before{background-size:150% 150%;animation:statement-colour-flow 16s ease-in-out infinite alternate;will-change:transform,background-position}
@keyframes statement-colour-flow{
  0%{transform:translate(-9%,3%) scale(1.06) rotate(-5deg);background-position:0% 20%}
  50%{transform:translate(4%,-7%) scale(1.16) rotate(3deg);background-position:65% 85%}
  100%{transform:translate(10%,6%) scale(1.08) rotate(8deg);background-position:100% 30%}
}
@media(prefers-reduced-motion:reduce){#top:before{animation:none;transform:none;will-change:auto}}

/* Consistent section rhythm: chalk and a single cool neutral. */
:root{--paper:#F7F7FA;--rule:#DADBE4}
body{background:#F7F7FA}
.intro,#leadership{background:#F7F7FA}
#work,#about{background:#EDEEF4}
main>section{border-bottom:1px solid #DADBE4}
.capabilities article{background:#EDEEF4;border-color:#DADBE4}
#work .work-card,.work-card{background:#FFFFFF;border-color:#DADBE4}
.principles li,.principles{border-color:#DADBE4}
/* Broad colour fields cross the header in a clearly visible, smooth loop. */
#top:before{inset:-45%;width:auto;height:auto;background:radial-gradient(ellipse at 20% 65%,#1646B5 0%,transparent 42%),radial-gradient(ellipse at 55% 30%,#1937EE 0%,transparent 45%),radial-gradient(ellipse at 85% 70%,#07959D 0%,transparent 40%),#08091D;background-size:170% 150%;filter:blur(35px);animation:header-colour-travel 10s ease-in-out infinite alternate;will-change:transform,background-position}
@keyframes header-colour-travel{0%{transform:translate(-15%,-6%) rotate(-8deg) scale(1.05);background-position:0% 0%}100%{transform:translate(15%,8%) rotate(10deg) scale(1.15);background-position:100% 100%}}
@media(max-width:650px){#top:before{inset:-45%;width:auto;height:auto}}
@media(prefers-reduced-motion:reduce){#top:before{animation:none;transform:none;will-change:auto;background-position:50% 50%}}

/* Shared refinements across portfolio and case-study pages. */
.tags{max-width:none;flex-wrap:wrap}
.hero>.tags{flex-basis:100%;width:100%}
.capabilities article{border-top:4px solid #173F87}
#contact-button{background:#FFFFFF;color:#173F87;border-color:#FFFFFF}
#contact-button:hover,#contact-button:focus-visible{background:#EDEEF4;color:#102B5D;border-color:#EDEEF4}
#contact-button:active{background:#DADBE4;color:#102B5D}

.hero{flex-wrap:wrap}

/* Diffused colour fields and a fine frosted texture; text stays crisp. */
#top:before{filter:blur(35px);filter:blur(35px)}
#top:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.09' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(90deg,#08091d70 0%,#08091d25 65%,#08091d10 100%);background-repeat:repeat,no-repeat;background-size:180px 180px,100% 100%}

/* Consistent, readable metric cards at every viewport size. */
.study-metrics>div,[data-metrics-carousel]>div{background:#FFFFFF;border:1px solid #DADBE4;border-radius:4px;padding:24px;gap:12px;min-width:0;justify-content:flex-end}
.study-metrics dd{color:#173F87;line-height:1.15}
.study-metrics dt{color:#25252B;line-height:1.5}
.study-metrics{align-items:stretch}
/* Stronger frosted diffusion, isolated behind the header content. */
#top:before{filter:blur(22px);filter:blur(35px)}
#top:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.28' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(90deg,#ffffff0a 0px,#ffffff0a 1px,#08091d12 2px,transparent 4px),linear-gradient(90deg,#08091d60,#08091d10);background-repeat:repeat,repeat,no-repeat;background-size:160px 160px,4px 100%,100% 100%}
@media(max-width:650px){[data-metrics-carousel]>div{padding:28px 24px;justify-content:center}}

/* Clear contact-button feedback on every page. */
#contact-button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
#contact-button:hover,#contact-button:focus-visible{background:#173F87;color:#FFFFFF;border-color:#A8C1EB;box-shadow:0 4px 18px #00000026;transform:none}
#contact-button:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
#contact-button:active{background:#102B5D;color:#FFFFFF;border-color:#A8C1EB;box-shadow:none}
@media(prefers-reduced-motion:reduce){#contact-button{transition:none}}

/* Smooth moving colour without grain, fluting or displacement. */
#top:before{filter:blur(35px)}
#top:after{background:linear-gradient(90deg,#08091d60,#08091d10)}
a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin),a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):hover,a.related-study-card:not(.pill):not(.skip):not(.footer-linkedin):focus-visible,.related-study-copy{background-color:#FFFFFF}

/* Lead with the value of the work, supported by identity and experience. */
#top .hero>div{max-width:940px}
#top .hero .hero-eyebrow{font-size:14px;font-weight:500;letter-spacing:.6px;line-height:1.5;margin-bottom:24px;color:#DFE9FB}
#top .hero h1{max-width:900px;font-size:clamp(48px,6.8vw,88px);letter-spacing:-1.8px;margin-bottom:28px}
#top .hero>div>p:not(.hero-eyebrow):not(.hero-credentials){max-width:680px}
a.hero-work-link:not(.pill):not(.skip):not(.footer-linkedin){display:inline-flex;align-items:center;gap:16px;margin-top:30px;padding-bottom:6px;font-size:17px;font-weight:500;color:#F8F6F1}
#top .hero .hero-credentials{max-width:660px;font-size:14px;line-height:1.6;color:#DFE9FB;margin:32px 0 0}
@media(max-width:650px){#top .hero h1{font-size:48px;letter-spacing:-1.2px}#top .hero .hero-eyebrow{font-size:12px;margin-bottom:20px}#top .hero .hero-credentials{font-size:13px}}

/* Vanta fog is isolated beneath text; the CSS gradient remains a fallback. */
.header-fog{position:absolute;inset:0;z-index:0;pointer-events:none}
#top.has-fog:before{display:none}
#top.has-fog:after{background:linear-gradient(90deg,#08091d65,#08091d15);z-index:0}
#top .wrap{z-index:1}
@media(prefers-reduced-motion:reduce){.header-fog{display:none}#top:before{animation:none}}

/* Footer fog shares the header palette and stays behind every control. */
footer.gradient{position:relative;isolation:isolate;overflow:hidden}
footer.gradient>.wrap{position:relative;z-index:1}
footer.gradient.has-fog:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#08091d65,#08091d15)}

/* Use the available desktop width before wrapping the statement. */
#top .hero:has(.hero-statement)>div{max-width:100%;width:100%}
#top .hero .hero-statement{max-width:100%;width:100%}
.hero-statement>span{display:block}
@media(min-width:1200px){.hero-statement>span:first-child{white-space:nowrap}}

/* Bodoni's display contrast paired with a clear contemporary sans serif. */
h1,h2,#top .hero h1{font-family:'DM Serif Display',Georgia,serif;font-weight:600}
body,h3,button,input,textarea{font-family:'DM Sans','Segoe UI',Arial,sans-serif}
#top .hero .hero-statement{line-height:1.12;letter-spacing:-1.5px}
@media(min-width:1200px){#top .hero .hero-statement{font-size:clamp(64px,6.1vw,88px)}}

/* DM Serif Display has a single, regular display weight. */
h1,h2,#top .hero h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400}

/* Shared type sizing and stronger case-study quote rules. */
#menu{font-size:16px}
#top .hero .hero-credentials{font-size:16px}
.work-card blockquote{border-left-width:4px}

#top .hero .hero-eyebrow{font-size:16px}

/* Dark navy feedback for white button surfaces. */
#contact-button:hover,#contact-button:focus-visible,.screenshot-carousel-controls button:not(:disabled):hover,.screenshot-carousel-controls button:not(:disabled):focus-visible,.case-study-cta:hover,.case-study-cta:focus-visible{background:#0B2248;color:#FFFFFF;border-color:#0B2248}
#contact-button:active{background:#07172F;color:#FFFFFF;border-color:#07172F}

/* Balance headline lines without leaving a final word on its own. */
#top .hero .hero-statement{font-size:clamp(40px,6.1vw,88px);line-height:1.12}
.hero-statement>span{text-wrap:balance;white-space:normal}
.hero-statement .keep-together{white-space:nowrap}
@media(min-width:1200px){.hero-statement>span:first-child{white-space:normal}}

/* Align homepage supporting copy with the full-width statement. */
#top .hero:has(.hero-statement)>div>p:not(.hero-eyebrow):not(.hero-credentials),
#top .hero:has(.hero-statement) .hero-credentials{max-width:100%;width:100%}

/* Full-screen navigation shares the atmospheric blue palette. */
#mobile-navigation{isolation:isolate;background:radial-gradient(ellipse at 85% 25%,#1646B5,transparent 65%),linear-gradient(135deg,#08091D,#075A70);color:#FFFFFF;overflow:hidden;overflow-y:auto}
#mobile-navigation::backdrop{background:#08091D}
#mobile-navigation .header-fog{position:absolute;inset:0;z-index:0;pointer-events:none}
#mobile-navigation .mobile-menu-header,#mobile-navigation .mobile-menu-links{position:relative;z-index:1;background:transparent}
#mobile-navigation .mobile-menu-links a{color:#FFFFFF;border-color:#ffffff40}
#mobile-navigation .mobile-menu-links a:hover,#mobile-navigation .mobile-menu-links a:focus-visible{color:#FFFFFF;background-color:#ffffff12}
#mobile-navigation .mobile-menu-links a:focus-visible,#mobile-navigation .mobile-menu-close:focus-visible{outline-color:#FFFFFF}
#mobile-navigation .mobile-menu-close{color:#FFFFFF}

.mobile-menu-close{width:40px;height:40px}
.mobile-menu-close span{left:6px;top:19px;width:28px}

/* Equal padding keeps link text vertically centred between menu rules. */
#mobile-navigation .mobile-menu-links a{display:flex;align-items:center;min-height:64px;padding:20px 0;line-height:1.2}

/* Smooth navy-to-blue movement without WebGL fog or texture. */
#top,footer.gradient,#mobile-navigation{background:linear-gradient(120deg,#080F26 0%,#123B78 35%,#102951 65%,#07536A 100%);background-size:250% 250%;animation:navy-gradient-drift 16s ease-in-out infinite alternate}
#top:before,#top:after,footer.gradient:after{display:none}
@keyframes navy-gradient-drift{from{background-position:0% 30%}to{background-position:100% 70%}}
@media(prefers-reduced-motion:reduce){#top,footer.gradient,#mobile-navigation{animation:none;background-position:50% 50%}}

/* Shared mobile carousel navigation: circular arrows and a progress rail. */
@media(max-width:650px){
.screenshot-carousel-controls{display:grid;grid-template-columns:48px 1fr 48px;gap:12px 18px;align-items:center;margin-top:22px}
.screenshot-carousel-controls button{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;background:#123B78;border:1px solid #123B78;color:#fff;transition:background-color .2s ease,box-shadow .2s ease}
.screenshot-carousel-controls button:not(:disabled):hover,.screenshot-carousel-controls button:not(:disabled):focus-visible{background:#080F26;border-color:#080F26;box-shadow:0 3px 12px #123b7826}
.screenshot-carousel-controls button:disabled{opacity:1;background:transparent;color:#9A9FAC;border-color:#DADBE4}
.screenshot-carousel-status{text-align:center;font-size:14px;font-weight:500;letter-spacing:1px;font-variant-numeric:tabular-nums;color:#173F87}
.carousel-progress{grid-column:1/-1;display:block;height:3px;background:#DADBE4;overflow:hidden;border-radius:3px}
.carousel-progress:before{content:'';display:block;width:var(--carousel-progress,0%);height:100%;background:#173F87;transition:width .25s ease}
}
@media(prefers-reduced-motion:reduce){.carousel-progress:before,.screenshot-carousel-controls button{transition:none}}

.back-to-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:50;display:grid;place-items:center;width:48px;height:48px;padding:0;background:#123B78;color:#FFFFFF;border:1px solid #FFFFFF60;border-radius:50%;box-shadow:0 4px 18px #080f2633;cursor:pointer;transition:background-color .2s ease}
.back-to-top[hidden]{display:none}
.back-to-top:hover,.back-to-top:focus-visible{background:#080F26;color:#FFFFFF}
.back-to-top:focus-visible{outline:3px solid #7FA7ED;outline-offset:3px}
@media(max-width:650px){.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}.footer-line{padding-right:56px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* Published project headings link directly to their case studies. */
.work-card h3 a.work-heading-link:not(.pill):not(.skip):not(.footer-linkedin){background:none;padding:0;color:inherit;text-decoration:none;animation:none}
.work-card h3 a.work-heading-link:not(.pill):not(.skip):not(.footer-linkedin):hover,.work-card h3 a.work-heading-link:not(.pill):not(.skip):not(.footer-linkedin):focus-visible{color:#173F87;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* Shared primary action used by the library and case-study CTAs. */
.button-primary{display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;min-height:48px;background:#173F87;color:#FFFFFF;border:1px solid #173F87;border-radius:4px;font-size:16px;font-weight:400;line-height:1.4;text-decoration:none;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.button-primary:hover,.button-primary:focus-visible{background:#0B2248;color:#FFFFFF;border-color:#0B2248;box-shadow:0 4px 14px #080f2626}
.button-primary:focus-visible{outline:3px solid #7FA7ED;outline-offset:3px}
.button-primary:active{background:#07172F;border-color:#07172F;box-shadow:none}
@media(prefers-reduced-motion:reduce){.button-primary{transition:none}}

/* Peek carousels with coin navigation and a quiet scale transition. */
.carousel-coins{display:none}.carousel-coins[hidden]{display:none}
.carousel-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:650px){
.carbs-screen-grid,.carbs-detail-grid,.carbs-detail-grid.carbs-detail-three,[data-metrics-carousel],.related-studies-grid{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6px;padding:8px 6px 16px;margin-inline:-6px;align-items:stretch;scrollbar-width:none}
.carbs-screen-grid>div,.carbs-detail-grid>div,[data-metrics-carousel]>div,.related-studies-grid>.related-study-card{flex:0 0 88%;width:88%;max-width:none;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always;transform:scale(.93);transform-origin:center center;opacity:.7;transition:transform .35s ease,opacity .35s ease}
.carbs-screen-grid>div.is-current-slide,.carbs-detail-grid>div.is-current-slide,[data-metrics-carousel]>div.is-current-slide,.related-studies-grid>.related-study-card.is-current-slide{transform:scale(1);opacity:1}
.carbs-screen-grid:after,.carbs-detail-grid:after,[data-metrics-carousel]:after,.related-studies-grid:after{content:'';flex:0 0 calc(12% - 16px)}
.carousel-coins{display:flex;justify-content:center;align-items:center;gap:2px;margin:6px 0 20px}
.carousel-coins button{display:grid;place-items:center;width:32px;height:44px;border:0;padding:0;background:transparent;border-radius:8px;cursor:pointer}
.carousel-coins button:before{content:'';width:8px;height:8px;border-radius:50%;background:#B7BDCA;transition:background-color .2s ease,transform .2s ease}
.carousel-coins button[aria-current="true"]:before{background:#173F87;transform:scale(1.25)}
.carousel-coins button:hover:before{background:#173F87}
.carousel-coins button:focus-visible{outline:2px solid #173F87;outline-offset:0}
}
@media(prefers-reduced-motion:reduce){.carbs-screen-grid>div,.carbs-detail-grid>div,[data-metrics-carousel]>div,.related-studies-grid>.related-study-card,.carousel-coins button:before{transition:none}}

/* Compact coin navigation, close to the slides. */
@media(max-width:650px){
.carousel-coins{gap:0;margin:0 0 12px}
.carousel-coins button{width:24px;height:32px}
.carbs-screen-grid,.carbs-detail-grid,.carbs-detail-grid.carbs-detail-three,[data-metrics-carousel],.related-studies-grid{padding-bottom:6px}
}
/* Highlight cards: a small visual cue, bold title and supporting detail. */
.study-metrics>div{position:relative;overflow:hidden;border-top:3px solid #173F87;padding:28px;min-height:190px;text-align:left;align-items:flex-start;justify-content:flex-end;background:linear-gradient(145deg,#FFFFFF 55%,#E9EFF8);box-shadow:0 3px 12px #10295108}

.study-metrics dd{font-weight:600;letter-spacing:-.7px}
.study-metrics dt{font-size:15px;color:#555F70;max-width:28ch}
.case-study:has(.carbs-screen-grid) .study-metrics>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.case-study:has(.carbs-screen-grid) .study-metrics dd{order:0;font-size:30px;line-height:1.15}
.case-study:has(.carbs-screen-grid) .study-metrics dt{order:1}
@media(max-width:650px){[data-metrics-carousel]>div{min-height:210px;padding:24px;text-align:left;align-items:flex-start;background:linear-gradient(145deg,#FFFFFF 55%,#E9EFF8);border-top:3px solid #173F87;justify-content:flex-end}.case-study:has(.carbs-screen-grid) [data-metrics-carousel]>div{justify-content:flex-start}}

/* Highlight cards rely on type and colour rather than decorative icons. */


/* Desktop header navigation sizing. */
#menu{font-size:14px}

#top .hero:has(.hero-statement)>div>p:not(.hero-eyebrow):not(.hero-credentials){font-size:18px}

.study-hero .study-summary{font-size:18px}

/* iOS case study: readable original screenshots on small screens. */
.ios-mobile-gallery{display:none}
@media(max-width:650px){
 .study-figure img.ios-desktop-composition{display:none}
 .ios-mobile-gallery{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-start;padding:8px 0 6px}
 .ios-mobile-slide{flex:0 0 88%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;opacity:.75;transform:scale(.96);transform-origin:top center;transition:transform .3s ease,opacity .3s ease}
 .ios-mobile-slide.is-current-slide{opacity:1;transform:scale(1)}
 .ios-mobile-gallery:after{content:'';flex:0 0 calc(12% - 16px)}
 .ios-mobile-gallery>.ios-mobile-slide:only-child{flex-basis:100%;opacity:1;transform:none}
 .ios-mobile-gallery:has(>.ios-mobile-slide:only-child):after{display:none}
 .study-figure .ios-mobile-slide img{display:block;width:100%;height:auto;border:1px solid #d6dbe5;border-radius:4px;background:#fff}
 .ios-screen-label{display:block;font-size:14px;line-height:1.5;color:#536077;margin-top:10px}
 .ios-mobile-gallery+.carousel-coins{margin:0 0 8px}
 .ios-desktop-composition~.carousel-coins[hidden]{display:none}
 .ios-mobile-gallery~figcaption{font-size:14px;line-height:1.5;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.ios-mobile-slide{transition:none}}

/* Subtle fanned previews, with the selected screenshot kept upright. */
@media(max-width:650px){
 .ios-mobile-gallery{align-items:center;padding-block:20px}
 .ios-mobile-slide{transform-origin:center center;transform:scale(.94) rotate(2deg)}
 .ios-mobile-slide.is-before-slide{transform:scale(.94) rotate(-2deg)}
 .ios-mobile-slide.is-after-slide{transform:scale(.94) rotate(2deg)}
 .ios-mobile-slide.is-current-slide,.ios-mobile-gallery>.ios-mobile-slide:only-child{transform:scale(1) rotate(0deg)}
}

@media(max-width:650px){
 .ios-mobile-gallery{gap:12px;scroll-padding-inline:8%}
 .ios-mobile-slide{flex-basis:84%;scroll-snap-align:center}
 .ios-mobile-gallery:before,.ios-mobile-gallery:after{content:'';flex:0 0 calc(8% - 12px)}
 .ios-mobile-gallery:has(>.ios-mobile-slide:only-child):before,.ios-mobile-gallery:has(>.ios-mobile-slide:only-child):after{display:none}
}

/* Let mobile screenshot galleries bleed to the screen edges. */
@media(max-width:650px){
 .ios-mobile-gallery{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}

@media(max-width:650px){
 .ios-mobile-gallery:has(>.ios-mobile-slide:only-child){width:100%;margin-inline:0;padding-inline:0}
}

.study-metrics .metric-context{font-size:14px;line-height:1.5;color:#536077;margin:12px 0 0;order:2}

.study-metrics>div:has(.metric-context){flex-direction:column;justify-content:flex-start}
.study-metrics>div:has(.metric-context)>dd{order:0}
.study-metrics>div:has(.metric-context)>dt{order:1}
.study-metrics>div:has(.metric-context)>.metric-context{order:2}