/* Motion lab: hero variants, main-menu hover and the Let's talk plane. */
.motion-lab .colour-wave canvas{transition:opacity .45s var(--v-ease);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(transparent,#000 12%,#000 84%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 86%,transparent),linear-gradient(transparent,#000 12%,#000 84%,transparent);mask-composite:intersect}
.motion-lab .colour-wave.is-swapping canvas{opacity:0}
.motion-lab[data-variant="4"] .v-hero::before{opacity:.45}

.lab-steps{position:absolute;left:12%;bottom:9%;display:flex;gap:18px;margin:0;padding:0;list-style:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--v-muted)}
.lab-steps li{position:relative;padding-top:10px;transition:color .5s var(--v-ease)}
.lab-steps li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;opacity:.25;transform-origin:left}
.lab-steps li.is-active{color:var(--v-ink)}
.lab-steps li.is-active::before{opacity:1;background:var(--v-blue);animation:lab-step 4.4s linear}
@keyframes lab-step{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.lab-picker{position:fixed;z-index:30;left:50%;bottom:20px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px)}
.lab-note{max-width:560px;text-align:center;font-size:13px;line-height:1.45;color:#3f4348;background:rgba(246, 246, 242,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:9px 16px;border-radius:10px;box-shadow:0 1px 0 rgba(25, 27, 28,.06)}
.lab-note strong{font-weight:600;color:var(--v-ink)}
.lab-switch{display:flex;gap:4px;padding:5px;background:rgba(25, 27, 28,.93);color:#f6f6f2;border-radius:999px;box-shadow:0 14px 40px rgba(20, 22, 25,.28)}
.lab-switch button{appearance:none;border:0;background:transparent;color:inherit;min-height:38px;padding:0 15px;border-radius:999px;cursor:pointer;display:flex;gap:8px;align-items:center;font-size:13px;opacity:.6;transition:opacity .2s,background .35s var(--v-ease),color .35s var(--v-ease)}
.lab-switch button:hover{opacity:1}
.lab-switch button[aria-pressed="true"]{background:#f6f6f2;color:var(--v-ink);opacity:1}
.lab-switch b{font-weight:600;font-variant-numeric:tabular-nums}
.contact-is-open .lab-picker{display:none}
@media(max-width:700px){.lab-switch span{display:none}.lab-switch button{padding:0 16px}.lab-note{font-size:12px}.lab-steps{left:20px;bottom:4%}}

/* Main menu: rolling characters, directional underline, gentle magnetism. */
.nm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nm-roll{display:inline-flex;overflow:hidden;line-height:1.3;vertical-align:bottom}
.nm-ch{display:inline-block;position:relative;white-space:pre;transition:transform .55s var(--v-ease);transition-delay:calc(var(--i)*22ms)}
.nm-ch::after{content:attr(data-c);position:absolute;left:0;top:100%;color:var(--nm-to,var(--v-blue))}
.v-nav nav a.nm-link{position:relative;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .6s var(--v-ease),color .45s var(--v-ease),border-color .45s var(--v-ease)}
.v-nav nav a.nm-link:hover{color:inherit}
.nm-link:hover .nm-ch,.nm-link:focus-visible .nm-ch{transform:translateY(-100%)}
.nm-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:var(--v-blue);transform:scaleX(0);transform-origin:var(--nm-origin,left);transition:transform .6s var(--v-ease)}
.nm-link:hover::after,.nm-link:focus-visible::after{transform:scaleX(1)}
.nm-link:hover .icon{color:var(--v-blue)}
.nm-arrow{overflow:visible}

/* CTAs: blue spreads from the pointer; labels roll; the envelope folds into a paper plane. */
.nm-fill{position:relative;isolation:isolate;--nm-to:currentColor;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .6s var(--v-ease),color .45s var(--v-ease),border-color .45s var(--v-ease)}
.nm-fill::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--v-blue);clip-path:circle(0 at var(--cx,50%) var(--cy,50%));transition:clip-path .7s var(--v-ease)}
.nm-fill:hover::before,.nm-fill:focus-visible::before,.nm-fill.is-hot::before{clip-path:circle(420px at var(--cx,50%) var(--cy,50%))}
.nm-fill:hover .nm-ch,.nm-fill:focus-visible .nm-ch,.nm-fill.is-hot .nm-ch{transform:translateY(-100%)}
.v-nav nav a.nm-fill:hover,.v-nav nav a.nm-fill.is-hot,.nm-fill.action:hover,.nm-fill.action:focus-visible{color:#fff;border-color:var(--v-blue)}
.nm-fill.action:hover{background:var(--v-ink)}
.nm-fill.action-light:hover{background:#eff0ec}
.nm-fill.contact-submit:hover,.nm-fill.contact-return:hover,.nm-fill.contact-submit.is-hot{background:var(--c-paper,#f6f6f2);color:#fff}
.nm-fill.contact-submit:disabled::before{clip-path:circle(0 at 50% 50%)}
.nm-plane,.nm-flyer{overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.nm-plane .nm-body,.nm-flyer .nm-body{fill:currentColor}
.nm-plane.is-returning{animation:nm-return .6s var(--v-ease)}
@keyframes nm-return{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.nm-flyer{position:fixed;z-index:60;pointer-events:none;color:var(--v-blue);will-change:transform}
.nm-trail{position:fixed;inset:0;z-index:59;width:100vw;height:100vh;pointer-events:none;overflow:visible}
.nm-trail path{fill:none;stroke:var(--v-blue);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;opacity:.7;transition:opacity .6s ease}
.nm-trail.is-fading path{opacity:0}
@media(prefers-reduced-motion:reduce){.nm-ch,.nm-link::after,.nm-fill::before{transition:none}}
@media print{.lab-picker,.lab-steps{display:none}}

/* Desktop project rail: current main project, progress, and a jump to the next one. */
.project-rail{display:none}
@media(min-width:1200px) and (hover:hover){
.project-rail{position:fixed;z-index:25;right:clamp(12px,1.6vw,26px);top:50%;display:flex;flex-direction:column;align-items:center;gap:16px;width:56px;padding:14px 0 10px;margin:0;border:0;border-radius:999px;background:transparent;color:var(--v-ink);font:inherit;cursor:pointer;opacity:0;pointer-events:none;transform:translate(24px,-50%);transition:opacity .5s var(--v-ease),transform .7s var(--v-ease),color .4s ease}
.project-rail.is-visible{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.project-rail.on-dark{color:#eeefeb}
.project-rail:focus-visible{outline:2px solid var(--v-blue);outline-offset:4px}
.rail-count{display:grid;justify-items:center;line-height:1}
.rail-num{position:relative;display:block;height:1em;overflow:hidden;font-size:44px;font-weight:600;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.rail-num>span{display:block}
.rail-num>span+span{position:absolute;inset:0}
.rail-total{margin-top:6px;font-size:12px;letter-spacing:.06em;opacity:.55}
.rail-track{display:grid;gap:6px}
.rail-track>span{position:relative;display:block;width:2px;height:34px;background:currentColor;opacity:.2;border-radius:2px;overflow:hidden;transition:opacity .4s,height .6s var(--v-ease)}
.rail-track>span.is-current{opacity:1;height:58px;background:color-mix(in srgb,currentColor 22%,transparent)}
.rail-track i{position:absolute;inset:0;background:var(--v-blue);transform:scaleY(0);transform-origin:top}
.rail-name{writing-mode:vertical-rl;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;white-space:nowrap}
.rail-next{display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:50%;transition:background .4s var(--v-ease),color .4s,border-color .4s}
.rail-next .icon{width:18px;height:18px}
.project-rail:hover .rail-next,.project-rail:focus-visible .rail-next{background:var(--v-blue);border-color:var(--v-blue);color:#fff}
.enter-up{animation:rail-in-up .6s var(--v-ease) both}.leave-up{animation:rail-out-up .6s var(--v-ease) both}
.enter-down{animation:rail-in-down .6s var(--v-ease) both}.leave-down{animation:rail-out-down .6s var(--v-ease) both}
@keyframes rail-in-up{from{transform:translateY(100%)}}@keyframes rail-out-up{to{transform:translateY(-100%)}}
@keyframes rail-in-down{from{transform:translateY(-100%)}}@keyframes rail-out-down{to{transform:translateY(100%)}}
}
@media(prefers-reduced-motion:reduce){.project-rail{transition:opacity .2s}}
@media print{.project-rail{display:none}}

/* ---------- Featured projects: one header system ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ph-mask>span{display:block}

/* Section opening */
/* The section's labelled rule is the only divider between hero and work. */
.motion-lab .hero-foot{border-bottom:0}
.wo.work-opening{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;padding:88px 0 72px}
.wo-top{grid-column:1/-1}
.wo-foot{display:contents}
.wo-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--v-line)}
.wo .overline{margin:0}
.wo-count{font-size:13px;color:var(--v-muted);font-variant-numeric:tabular-nums}
.wo-title{margin-top:44px;font-size:clamp(44px,6.4vw,96px);font-weight:500;line-height:1;letter-spacing:-.055em}
.wo .work-intro{max-width:30ch;justify-self:end;align-self:end;padding:0 0 10px;font-size:18px;line-height:1.5}
.wo-index{grid-column:1/-1;list-style:none;margin:64px 0 0;padding:0;border-top:1px solid var(--v-line)}
.wo-index li{border-bottom:1px solid var(--v-line)}
.wo-index a{position:relative;display:grid;grid-template-columns:44px 1fr auto 28px;align-items:center;gap:16px;min-height:60px;padding:0 4px;transition:color .4s var(--v-ease)}
.wo-index a::before{content:"";position:absolute;inset:0;background:var(--v-blue);opacity:.06;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--v-ease)}
.wo-index a:hover::before,.wo-index a:focus-visible::before{transform:scaleX(1)}
.wo-index a:hover,.wo-index a:focus-visible{color:var(--v-blue)}
.wo-num{font-size:13px;color:var(--v-muted);font-variant-numeric:tabular-nums}
.wo-name{font-size:20px;font-weight:500;letter-spacing:-.02em;transition:transform .6s var(--v-ease)}
.wo-index a:hover .wo-name{transform:translateX(8px)}
.wo-cat{font-size:13px;color:var(--v-muted)}
.wo-index .icon{width:18px;height:18px;justify-self:end}

/* Project header */
.ph{--ph-ink:var(--v-ink);--ph-muted:var(--v-muted);--ph-line:var(--v-line);color:var(--ph-ink);margin-bottom:48px}
.ph-dark{--ph-ink:#eeefeb;--ph-muted:rgba(238, 239, 235,.58);--ph-line:rgba(238, 239, 235,.16)}
.feature-cisty>.ph,.partner-feature>.ph{padding-top:40px}
.ph-rule{display:flex;align-items:center;gap:20px}
.ph-index{display:block;overflow:hidden;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.2}
.ph-index>span{display:block}
.ph-line{flex:1;height:1px;background:var(--ph-line);transform-origin:left}
.ph-meta{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.ph-meta li{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;border:1px solid var(--ph-line);border-radius:999px;font-size:12px;letter-spacing:.02em;color:var(--ph-muted);white-space:nowrap}
.ph-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.ph-status.is-live{color:var(--ph-ink)}
.ph-status.is-live::before{background:#1f9d62;opacity:1;box-shadow:0 0 0 0 rgba(31, 157, 98,.5);animation:ph-live 2.4s ease-out infinite}
@keyframes ph-live{0%{box-shadow:0 0 0 0 rgba(31, 157, 98,.45)}70%,100%{box-shadow:0 0 0 7px rgba(31, 157, 98,0)}}
.motion-paused .ph-status.is-live::before{animation:none}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px 64px;align-items:end;margin-top:36px}
.ph h3{font-size:clamp(48px,6vw,92px);font-weight:600;line-height:.98;letter-spacing:-.058em}
.ph-premise{margin-top:18px;font-size:clamp(18px,1.45vw,22px);font-weight:450;line-height:1.4;letter-spacing:-.015em;color:var(--ph-muted)}
.ph-premise .ph-mask:first-child{color:var(--ph-ink)}
.ph-copy>p{max-width:46ch;font-size:17px;line-height:1.6;color:var(--ph-muted)}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
.ph-actions .text-action{border:0;padding:6px 0;color:var(--ph-ink)}
.ph-dark .ph-actions .text-action:hover{color:#9aa9f3}
.hifive-chapter .ph{margin-bottom:56px}

/* Reveal sequence (only once JS has confirmed it can reveal) */
.ph-ready .ph-mask>span{transform:translateY(105%)}
.ph-ready .ph-index>span{transform:translateY(110%)}
.ph-ready .ph-line{transform:scaleX(0)}
.ph-ready .ph-meta li,.ph-ready .ph-copy>*,.ph-ready .wo-top>*,.ph-ready .wo-foot>*,.ph-ready .wo-index li{opacity:0;transform:translateY(14px)}
.ph-ready.is-in .ph-mask>span{transform:none;transition:transform 1.05s var(--v-ease) calc(.12s + var(--d,0)*.09s)}
.ph-ready.is-in .ph-index>span{transform:none;transition:transform .8s var(--v-ease)}
.ph-ready.is-in .ph-line{transform:none;transition:transform 1.3s var(--v-ease) .05s}
.ph-ready.is-in .ph-meta li,.ph-ready.is-in .ph-copy>*,.ph-ready.is-in .wo-top>*,.ph-ready.is-in .wo-foot>*,.ph-ready.is-in .wo-index li{opacity:1;transform:none;transition:opacity .8s ease,transform .9s var(--v-ease)}
.ph-ready.is-in .ph-meta li:nth-child(1){transition-delay:.3s}.ph-ready.is-in .ph-meta li:nth-child(2){transition-delay:.38s}
.ph-ready.is-in .ph-copy>p{transition-delay:.42s}.ph-ready.is-in .ph-copy>.ph-actions{transition-delay:.52s}
.ph-ready.is-in .wo-foot>.work-intro{transition-delay:.35s}
.ph-ready.is-in .wo-index li:nth-child(1){transition-delay:.45s}.ph-ready.is-in .wo-index li:nth-child(2){transition-delay:.53s}.ph-ready.is-in .wo-index li:nth-child(3){transition-delay:.61s}

@media(max-width:1050px){.ph-grid{grid-template-columns:1fr;gap:28px}.wo.work-opening{grid-template-columns:1fr}.wo .work-intro{justify-self:start;margin-top:28px}}
@media(max-width:700px){
.wo.work-opening{padding:64px 0 44px}.wo-title{margin-top:30px;font-size:clamp(40px,11vw,56px)}.wo-index{margin-top:36px}.wo .work-intro{font-size:16px}
.wo-index a{grid-template-columns:34px 1fr 24px;min-height:56px}.wo-cat{display:none}.wo-name{font-size:18px}
.feature-cisty>.ph,.partner-feature>.ph{padding-top:28px}.ph{margin-bottom:32px}
.ph-rule{flex-wrap:wrap;gap:12px 16px}.ph-line{min-width:40px}.ph-meta{width:100%;order:3;flex-wrap:wrap}
.ph-grid{margin-top:22px}.ph h3{font-size:clamp(42px,12vw,58px)}.ph-premise{font-size:21px;margin-top:12px}.ph-copy>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.ph-status.is-live::before{animation:none}}

/* ---------- Further work: same heading row, numbering and hover as the featured index ---------- */
.fw.further-work{padding:88px 0 96px}
.fw-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:end;margin:44px 0 56px}
.fw .wo-title{margin:0}
.fw .work-intro{max-width:32ch;padding-bottom:10px;font-size:18px;line-height:1.5;color:var(--v-muted)}
.fw .project-index-list{margin:0;border-top:1px solid var(--v-line);border-bottom:0}
.fw .fw-row{position:relative;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.55fr) minmax(140px,.55fr) 28px;grid-template-areas:"num title description category action";gap:clamp(16px,2.4vw,36px);align-items:center;padding-block:26px;border-top:0;border-bottom:1px solid var(--v-line);background:none;transition:color .4s var(--v-ease)}
.fw .fw-row:hover,.fw .fw-row:focus-visible{background:none}
.fw .fw-row::before{content:"";position:absolute;inset:0;background:var(--v-blue);opacity:.06;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--v-ease);pointer-events:none}
.fw .fw-row:hover::before,.fw .fw-row:focus-visible::before{transform:scaleX(1)}
.fw .fw-row>.wo-num{grid-area:num;display:block;padding-left:4px}
.fw .fw-row h3{grid-area:title;font-size:20px;font-weight:500;letter-spacing:-.02em;transition:transform .6s var(--v-ease),color .4s var(--v-ease)}
.fw .fw-row:hover h3,.fw .fw-row:focus-visible h3{transform:translateX(8px);color:var(--v-blue)}
.fw .fw-row>p{grid-area:description;font-size:15px}
.fw .fw-row>.category-chip{grid-area:category;justify-self:end;min-height:0;padding:0;border:0;background:none;color:var(--v-muted);font-size:13px;font-weight:400;white-space:nowrap}
.fw .fw-row>.icon{grid-area:action;justify-self:end;width:18px;height:18px}
.fw .fw-row:hover>.icon,.fw .fw-row:focus-visible>.icon{color:var(--v-blue)}
.ph-ready .fw-head>*,.ph-ready .fw-row{opacity:0;transform:translateY(14px)}
.ph-ready.is-in .fw-head>*,.ph-ready.is-in .fw-row{opacity:1;transform:none;transition:opacity .8s ease calc(.3s + var(--i,0)*.06s),transform .9s var(--v-ease) calc(.3s + var(--i,0)*.06s)}
.ph-ready.is-in .fw-head>.ph-mask,.ph-ready.is-in .fw-head>h2{transition-delay:0s}
@media(max-width:1050px){.fw-head{grid-template-columns:1fr}.fw .work-intro{justify-self:start;margin-top:24px}.fw .fw-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1.5fr) 24px;grid-template-areas:"num title description action" ". category description action";row-gap:8px}.fw .fw-row>.category-chip{justify-self:start}}
@media(max-width:700px){.fw.further-work{padding:56px 0 64px}.fw-head{margin:30px 0 36px}.fw .fw-row{grid-template-columns:34px minmax(0,1fr) 24px;grid-template-areas:"num title action" ". description description" ". category category";gap:8px 12px;padding-block:22px}.fw .fw-row h3{font-size:18px}}

/* Rail lane: while the project rail is shown, the featured projects leave it room. */
@media(min-width:1200px) and (hover:hover){
:root{--rail-lane:112px}
.project-rail{right:calc((var(--rail-lane) - 56px)/2)}
.feature-cisty.frame,.partner-feature.frame,.insurance-feature.frame,.hifive-chapter>.frame{width:min(1320px,calc(100% - var(--rail-lane)*2))}
}

/* The insurance feature shares the case-study schematic and the project layout. */
.insurance-feature .ih-case{margin:0}.insurance-feature{min-width:0}
.insurance-feature .ih-figure figcaption span{font-size:16px;line-height:1.6}
.motion-lab .practice-details p+p{margin-top:12px}