/* source: css/metrics.css */
/* Rolling counter of metric_components.rolling_counter: every key figure of the site
   (case sections, conclusions, parcours) rolls once when it becomes readable.
   html.bmp-motion is set by the page head unless motion is reduced or paused. */
.bmp-counter{font-variant-numeric:tabular-nums}
.bmp-counter .bmp-counter-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bmp-counter :is(.bmp-counter-visual,.bmp-digit,.bmp-digit-strip,.bmp-digit-cell,.bmp-counter-punctuation){font:inherit;letter-spacing:inherit;margin:0}
.bmp-counter .bmp-counter-visual{display:inline-flex;align-items:baseline;white-space:nowrap;user-select:none}
.bmp-counter .bmp-digit{display:inline-block;width:.78em;height:1.12em;overflow:hidden;vertical-align:bottom;mask-image:linear-gradient(transparent,var(--white) 8%,var(--white) 92%,transparent)}
.bmp-counter .bmp-digit-strip{display:block;transform:translateY(calc(var(--steps) * -1.12em))}
.bmp-counter .bmp-digit-cell{display:block;height:1.12em;line-height:1.12;text-align:center}
.bmp-counter .bmp-counter-unit{font-size:.49em;margin-left:.12em}
.bmp-motion .bmp-counter:not(.is-counted) .bmp-digit-strip{transform:translateY(0)}
.bmp-motion .bmp-counter.is-counted .bmp-digit-strip{transition:transform var(--roll-duration) var(--ease-roll) var(--roll-delay)}
/* Pausing while a reel rolls lands it on its figure at once. */
html:not(.bmp-motion) .bmp-counter .bmp-digit-strip{transition:none}
@media(prefers-reduced-motion:reduce){
 .bmp-motion .bmp-counter .bmp-digit-strip{transform:translateY(calc(var(--steps) * -1.12em));transition:none}
}

/* source: css/case.css */
/* Project pages: the one case template (opening, plaque, chapters, sections, galleries, focus, sequences,
   decisions, callouts, film, offer, results, next project, lightbox) and the per-project scenes.
   The rolling counter lives in metrics.css, shared with the parcours. */


/* Shell. */
.bmp-case{--ease:var(--ease-soft);--case-section-space:var(--space-7);--case-block-space:var(--space-6);--case-copy-space:28px;--case-detail-space:20px;max-width:var(--width-case);margin:auto;padding:32px var(--gutter) 64px}
.bmp-case a{text-underline-offset:6px}
.bmp-case button{font:inherit;color:inherit;cursor:pointer}
.bmp-top{display:flex;justify-content:space-between;font-size:var(--text-meta);color:var(--muted)}
.bmp-top .ui-button{min-height:40px;padding:9px 15px;font-size:var(--text-caption)}

/* Opening. */
.bmp-opening{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;min-height:900px;margin-top:32px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);overflow:clip}
.bmp-heading{position:relative;z-index:2;align-self:start;padding-top:24px;padding-bottom:40px;pointer-events:none}
.bmp-identity{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.bmp-app-icon{display:block;flex:0 0 auto;width:56px;height:56px;margin:0}
.bmp-heading h1{width:auto;font:var(--weight-heavy) var(--text-hero)/.98 var(--font-display);letter-spacing:-.04em}
.bmp-heading h1>span{display:block}
.bmp-heading .bmp-intent{max-width:28ch;margin:32px 0 var(--case-copy-space);font-size:clamp(24px,2.25vw,34px);line-height:1.27;letter-spacing:-.025em}
.bmp-intro{max-width:50ch;font-size:var(--text-body);line-height:1.75;color:var(--ink-mute)}
.bmp-intro strong{font-weight:var(--weight-bold);color:var(--ink)}
.bmp-intro .bmp-link{display:inline-block;margin-top:32px;pointer-events:auto;color:var(--ink)}
.bmp-intro .bmp-website{display:inline-block;margin:32px 0 0 1.25rem;pointer-events:auto}
.bmp-link{white-space:nowrap}
.bmp-hero-facts{display:grid;grid-template-columns:.72fr 1.15fr 1.13fr;gap:0;max-width:680px;margin:48px 0 0;border-top:1px solid var(--line)}
.bmp-hero-facts>div{padding:20px 24px 0 0}
.bmp-hero-facts>div+div{padding-left:24px;border-left:1px solid var(--line)}
.bmp-hero-facts dt{margin-bottom:12px;font-size:var(--text-caption);color:var(--muted)}
.bmp-hero-facts dd{margin:0;font-size:var(--text-body-s);line-height:1.45;color:var(--ink)}
.bmp-hero-facts .bmp-rank{display:block;margin-bottom:2px;font:var(--weight-bold) var(--text-body)/1.45 var(--font-text);letter-spacing:0}
.bmp-hero-facts .bmp-rank+span{display:block;font-size:var(--text-ui);color:var(--ink-mute)}
.bmp-heading .bmp-scope{display:block;max-width:55ch;margin-top:32px;font-size:var(--text-meta);line-height:1.8;color:var(--muted)}
.bmp-cover{width:calc(100% + 400px);min-width:0;margin:0 0 0 -300px}
.bmp-cover img{display:block;width:100%;height:auto}
/* Beat Maker Pro scene: the photographed device and two interface planes. */
.bmp-scene{position:relative;aspect-ratio:3/2}
.bmp-plane{position:absolute;transform:translate3d(var(--plane-x,0px),var(--plane-y,0px),0)}
.bmp-phone-plane{inset:0;filter:drop-shadow(-10px 18px 18px var(--shadow-soft))}
.bmp-phone-plane .bmp-plane-enter{mask-image:linear-gradient(var(--white) 89%,transparent 100%)}
.bmp-pads-plane{left:15.2%;top:31%;width:28.65%;--entry-x:20px;--entry-y:24px;--entry-scale:.97;--delay:260ms}
.bmp-lessons-plane{left:70.45%;top:10.35%;width:10.42%;--entry-x:-12px;--entry-y:18px;--entry-scale:.97;--delay:480ms}
.bmp-pad-detail,.bmp-lesson-detail{position:relative;overflow:hidden}
.bmp-pad-detail{--glow:#716bff33;aspect-ratio:440/165;border-radius:var(--radius-s);box-shadow:0 8px 22px var(--glow)}
.bmp-lesson-detail{--glow:#ffe04a44;aspect-ratio:160/53;border-radius:50px;box-shadow:0 5px 18px var(--glow)}
.bmp-cover .bmp-pad-detail img{position:absolute;width:349.091%;height:620.606%;max-width:none;left:-53.182%;top:-191.515%}
.bmp-cover .bmp-lesson-detail img{position:absolute;width:960%;height:1932.075%;max-width:none;left:-676.25%;top:-200%}
.bmp-motion .bmp-plane-enter{opacity:0;filter:blur(4px);transform:translate3d(var(--entry-x,0px),var(--entry-y,42px),0) scale(var(--entry-scale,.985))}
.bmp-motion .bmp-scene.is-ready .bmp-plane-enter{opacity:1;filter:blur(0);transform:none;transition:transform 2.1s var(--ease-enter) var(--delay,0ms),opacity 1.45s ease var(--delay,0ms),filter 1.6s ease var(--delay,0ms)}

/* Chapters. */
.bmp-chapters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin-top:40px;padding:24px 0;border-block:1px solid var(--line);font-size:var(--text-meta)}
.bmp-chapters .ui-button,.bmp-gallery-controls .ui-button{min-height:42px;padding:9px 15px;font-size:var(--text-caption)}
.bmp-pause{margin-left:auto}

/* Sections. */
.bmp-case h2{font:var(--weight-bold) var(--text-heading)/1.2 var(--font-display);letter-spacing:-.035em}
.bmp-case h3{font-weight:var(--weight-bold);font-size:25px;line-height:1.45;letter-spacing:-.02em}
.bmp-case p{max-width:60ch}
.bmp-section{position:relative;padding-block:var(--case-section-space);border-bottom:1px solid var(--line);scroll-margin-top:100px}
.bmp-case .case-section--preview{padding-top:clamp(112px,13vw,196px)}
.bmp-case .case-section--experience{padding-bottom:clamp(128px,15vw,220px)}
.bmp-section-heading{display:grid;grid-template-columns:1.3fr .7fr;column-gap:10%;row-gap:48px;align-items:end;max-width:var(--width-section);margin:0 auto var(--case-block-space)}
/* Section titles carry no forced break: balanced wrapping inside 14ch keeps two or three even lines. */
.bmp-section-heading h2{max-width:14ch;text-wrap:balance}
/* A deliberate break in a title yields to balanced wrapping on the narrowest phones. */
@media(max-width:359px){.bmp-section-heading h2 br{display:none}}
.bmp-section-heading>div:first-child{position:relative}
.bmp-section-heading>div:first-child p{max-width:48ch;margin-top:var(--case-copy-space);font-size:var(--text-lead);line-height:1.85;color:var(--ink-mute)}
.bmp-section-heading>div:first-child::after{content:"";display:block;width:clamp(42px,5vw,84px);height:2px;margin-top:28px;background:var(--spectrum-linear);mask-image:linear-gradient(90deg,var(--white) 35%,transparent)}
/* Section result. */
.bmp-result{position:relative;padding:16px 0 16px 32px;border-left:1px solid var(--line)}
.bmp-result::before{content:'';position:absolute;left:-1px;top:12%;height:65%;width:1px;background:var(--spectrum-vertical);box-shadow:0 0 13px color-mix(in srgb,var(--spectrum-blue) 40%,transparent)}
.bmp-result strong{display:block;font-family:var(--font-display);font-size:clamp(48px,6.6vw,94px);font-weight:var(--weight-bold);line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
.bmp-result p{margin:20px 0 16px;font-size:var(--text-body-s);line-height:1.65;color:var(--ink-soft)}

/* Galleries. */
.bmp-gallery-wrap{position:relative;padding:36px 0 20px;background:radial-gradient(ellipse at 50% 100%,var(--glow-case),transparent 70%)}
.bmp-gallery-wrap::after{content:"";display:block;height:1px;margin-top:clamp(24px,4vw,52px);background:var(--line-strong);mask-image:linear-gradient(90deg,var(--white),transparent 72%)}
/* A gallery that closes a chapter leaves the separation to the section rule: one margin, one line. */
.bmp-section>.bmp-gallery-wrap:last-child::after{display:none}
.bmp-gallery{display:flex;gap:28px 36px;overflow-x:auto;padding:28px 14px 40px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--surface);overscroll-behavior-x:contain}
.bmp-art-button{position:relative;flex:0 0 clamp(300px,26vw,380px);min-width:0;padding:0;border:0;background:transparent;text-align:left;scroll-snap-align:center}
.bmp-case .bmp-art-button{cursor:zoom-in}
.bmp-art-button>span{display:block;position:relative;min-height:0;margin:0;padding:14px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font:var(--weight-regular) var(--text-caption)/1.6 var(--font-text);color:var(--muted)}
.bmp-art-button:hover>span{color:var(--ink-soft)}
.bmp-art-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.bmp-source-window{position:relative;aspect-ratio:207/448;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-2);transition:transform .7s var(--ease)}
.bmp-source-window img{display:block;width:100%;height:100%;object-fit:contain}
.bmp-gallery-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px 24px;margin-top:20px}
.bmp-gallery-bottom p{font-size:var(--text-caption);color:var(--muted)}
.bmp-gallery-controls{display:flex;gap:14px}
.bmp-gallery-controls[hidden]{display:none}
.bmp-case .case-gallery-title{margin:0 0 20px;font:var(--weight-bold) var(--text-lead)/1.5 var(--font-text);color:var(--ink-mute)}

/* Editorial pair, film, experience, offer. */
.bmp-editorial{display:grid;grid-template-columns:1fr 1fr;column-gap:10%;row-gap:28px;max-width:var(--width-text);margin:var(--case-block-space) auto;padding:clamp(32px,5vw,68px) 0}
.bmp-editorial p{font-size:var(--text-lead);line-height:1.8;color:var(--ink-mute)}
.bmp-editorial p+p{margin-top:var(--case-detail-space)}
.bmp-film{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:530px;overflow:hidden;background:radial-gradient(ellipse at 32% 70%,var(--glow-case),transparent 65%),var(--surface)}
.bmp-film>img{width:100%;height:530px;padding-top:32px;object-fit:contain;align-self:end}
.bmp-film-copy{padding:48px}
.bmp-film-copy>span{font-size:var(--text-meta);color:var(--muted)}
.bmp-film-copy>p{margin:28px 0 40px;font-size:clamp(26px,3.3vw,48px);font-weight:var(--weight-bold);line-height:1.25;letter-spacing:-.025em}
.bmp-play.ui-button{min-width:0}
.bmp-play-icon{display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}
.bmp-film-copy>a{margin-top:24px}
.bmp-film iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.bmp-film.is-playing{display:block;min-height:0;background:var(--paper)}

/* Lightbox. */
.bmp-lightbox{width:min(720px,94vw);max-height:94svh;margin:auto;padding:24px;border:1px solid var(--line-solid);background:var(--surface);color:var(--ink);overscroll-behavior:contain}
.bmp-lightbox::backdrop{background:var(--scrim);backdrop-filter:blur(8px)}
.bmp-lightbox-top{position:sticky;top:-24px;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;padding-block:8px;background:var(--surface)}
.bmp-lightbox h2{font:var(--weight-bold) var(--text-lead) var(--font-text);letter-spacing:0}
.bmp-lightbox-art{max-width:621px;margin:auto}
.bmp-lightbox>p{margin:16px auto 0;font-size:var(--text-micro);color:var(--muted);text-align:center}

/* Motion: figures enter once, images lift on hover. */
@media(hover:hover) and (pointer:fine){
 .bmp-art-button:hover .bmp-source-window{transform:translateY(-9px)}
 .bmp-case .project-next:hover strong{color:transparent;background:var(--spectrum-linear);-webkit-background-clip:text;background-clip:text}
}
.bmp-motion .bmp-gallery-wrap,.bmp-motion .bmp-film{opacity:0;transform:translateY(24px);clip-path:inset(2% 0 0)}
.bmp-motion .bmp-in{opacity:1;transform:none;clip-path:inset(0);transition:opacity 1.5s ease,transform 1.9s var(--ease-enter),clip-path 1.9s var(--ease-enter)}
html:not(.bmp-motion) .bmp-art-button .bmp-source-window{transition:none}
.bmp-motion :is(.case-focus,.case-sequence)[data-case-reveal]{transition:opacity 700ms var(--ease-soft),transform 700ms var(--ease-soft)}
.bmp-motion :is(.case-focus,.case-sequence)[data-case-reveal]:not(.is-inview){opacity:1;transform:translateY(10px)}
.bmp-motion :is(.case-focus,.case-sequence)[data-case-reveal].is-inview{opacity:1;transform:none}

/* Mobile cases (edjing Mix, Color Pop): the photographed device blends into the page grain. */
.mobile-case .bmp-opening{min-height:780px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;padding-bottom:30px}
.mobile-case .bmp-heading{padding-top:36px}
.mobile-case .bmp-cover{width:calc(100% + 140px);margin-left:-95px;align-self:center;isolation:isolate;mix-blend-mode:lighten}
.mobile-case .bmp-scene{aspect-ratio:1.15;isolation:isolate;background-color:var(--paper);background-image:var(--grain);background-size:100vw 100vh;background-attachment:fixed}
.mobile-case .case-device{inset:0;display:flex;align-items:center;mix-blend-mode:lighten}
.mobile-case .case-device .bmp-plane-enter{width:100%;mask-image:linear-gradient(var(--white) 92%,transparent)}
.mobile-case .case-device img{width:125%;max-width:none;margin-left:-12%}
.edjing-case .case-device img{width:122%;margin-left:-10%}
.mobile-case .bmp-film{min-height:470px;background:var(--surface-deep)}
.mobile-case .bmp-film>img{height:470px;padding:0;object-fit:contain;mix-blend-mode:lighten}
.mobile-case .bmp-film-copy>p{font-size:clamp(27px,3vw,42px)}
/* Wide cases (Pixai, Flow, Muzi): a stage of real screens beside the text, whose column matches edjing Mix. */
.wide-case .bmp-opening{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(64px,7vw,112px);overflow:visible}
/* Plaque: the role takes its own width, so each value holds on one or two lines. */
.wide-case .bmp-hero-facts{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.2fr)}
.wide-case .bmp-hero-facts>div:last-child{padding-right:0}
/* Shared by the mobile and the wide cases: intent, icon, galleries, section results, lightbox. */
:is(.mobile-case,.wide-case) .bmp-intent{max-width:25ch;font-size:clamp(24px,2.1vw,32px)}
:is(.mobile-case,.wide-case) .bmp-app-icon{border-radius:var(--radius-s)}
:is(.mobile-case,.wide-case) .bmp-gallery-wrap{padding:0;background:none}
:is(.mobile-case,.wide-case) .bmp-gallery{align-items:flex-start;padding:20px 2px 24px}
:is(.mobile-case,.wide-case) .bmp-art-button{flex-basis:clamp(245px,23vw,310px)}
:is(.mobile-case,.wide-case) .bmp-source-window{aspect-ratio:278/600;border-radius:var(--radius-s);background:transparent}
:is(.mobile-case,.wide-case) .case-wide{aspect-ratio:534/300}
:is(.mobile-case,.wide-case) .case-cinema{aspect-ratio:600/277}
:is(.mobile-case,.wide-case) .case-tablet{aspect-ratio:447/600}
/* Raw app screens exported in 9:16 (onboarding, paywalls), on every case layout. */
.bmp-source-window.case-screen{aspect-ratio:9/16}
:is(.mobile-case,.wide-case) :is(.case-wide-gallery,.case-cinema-gallery) .bmp-art-button{flex-basis:clamp(380px,43vw,600px)}
:is(.mobile-case,.wide-case) .bmp-gallery-bottom{padding-inline:2px}
:is(.mobile-case,.wide-case) .bmp-gallery-bottom p{font-size:var(--text-meta)}
:is(.mobile-case,.wide-case) .bmp-section-heading{align-items:center}
:is(.mobile-case,.wide-case) .bmp-result strong{font-size:clamp(48px,5.8vw,82px)}
:is(.mobile-case,.wide-case) .bmp-result p{font-size:var(--text-body)}
:is(.mobile-case,.wide-case) .bmp-result .ui-button{font-size:var(--text-caption)}
:is(.mobile-case,.wide-case) .bmp-lightbox:has(:is(.case-wide,.case-cinema)){width:min(1100px,94vw)}
:is(.mobile-case,.wide-case) .bmp-lightbox-art{max-width:100%;max-height:none}
:is(.mobile-case,.wide-case) .bmp-lightbox-art .bmp-source-window{width:min(100%,430px);height:auto;margin:auto}
:is(.mobile-case,.wide-case) .bmp-lightbox-art :is(.case-wide,.case-cinema){width:100%}
/* Color Pop: icon evolution and iPad view. */
.case-icon-evolution{display:flex;justify-content:center;align-items:center;gap:9%;padding:32px 6% 56px}
.case-icon-evolution figure{margin:0}
.case-icon-evolution figure:first-child{width:20%;max-width:160px}
.case-icon-evolution figure:last-child{width:42%;max-width:330px}
.case-icon-evolution img{width:100%;height:auto;border-radius:23%;box-shadow:0 18px 40px var(--shadow-soft)}
.case-icon-evolution figcaption{margin-top:22px;font-size:var(--text-ui);line-height:1.7;color:var(--ink-mute)}
.case-icon-evolution figure:first-child figcaption{font-size:var(--text-caption)}
.case-icon-evolution strong{font-size:var(--text-lead-l);color:var(--ink)}
.case-evolution-line{width:10%;height:var(--ui-rule);margin-top:-60px;background:var(--spectrum-linear);mask-image:linear-gradient(90deg,color-mix(in srgb,var(--white) 15%,transparent),var(--white))}

/* Editorial emphasis: a decision leads, a focus supports, a sequence explains. */
.edjing-case .bmp-opening{grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(64px,7vw,112px);min-height:720px}
.edjing-case .bmp-cover{width:104%;margin-left:-2%}
.bmp-case .case-decision{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,.72fr);gap:clamp(56px,8vw,120px);align-items:center;max-width:var(--width-figure);margin:0 auto var(--case-section-space)}
.bmp-case .case-decision .bmp-art-button{display:block;width:100%;max-width:none}
.bmp-case .case-decision-main>h3{max-width:17ch;margin:0 0 36px;font:var(--weight-bold) clamp(28px,3vw,44px)/1.18 var(--font-text);letter-spacing:-.03em}
.bmp-case .case-decision-control h4{margin:0 0 22px;font:var(--weight-bold) var(--text-lead-l)/1.4 var(--font-text);color:var(--ink)}
.bmp-case .case-decision-control p{max-width:34ch;margin-top:24px;font-size:var(--text-ui);line-height:1.8;color:var(--muted)}
.bmp-case .case-focus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,8vw,128px);align-items:center;margin-bottom:var(--case-section-space);padding-inline:6%}
.bmp-case .case-focus-art{position:relative;width:min(100%,360px);padding-bottom:24px;justify-self:center}
.bmp-case .case-focus-art .bmp-art-button{display:block;width:100%;max-width:none}
.bmp-case .case-focus-copy{max-width:42ch}
.bmp-case .case-focus-copy h3{max-width:18ch;font:var(--weight-bold) clamp(28px,3vw,44px)/1.2 var(--font-text);letter-spacing:-.03em}
.bmp-case .case-focus-copy p{max-width:36ch;margin-top:28px;font-size:var(--text-lead);line-height:1.85;color:var(--ink-mute)}
.bmp-case .case-focus .bmp-source-window,.bmp-case .case-decision .bmp-source-window{box-shadow:0 32px 70px var(--shadow-deep),0 0 0 1px var(--line-soft)}
.bmp-case .case-sequence{display:grid;grid-template-columns:minmax(220px,.64fr) minmax(0,1.36fr);gap:clamp(56px,8vw,128px);align-items:center;margin-bottom:var(--case-section-space)}
.bmp-case .case-sequence-copy{align-self:start;padding-top:clamp(24px,6vw,96px)}
.bmp-case .case-sequence-copy h3{max-width:13ch;font:var(--weight-bold) clamp(30px,3.2vw,48px)/1.16 var(--font-text);letter-spacing:-.035em}
.bmp-case .case-sequence-copy p{max-width:32ch;margin-top:28px;font-size:var(--text-lead);line-height:1.85;color:var(--ink-mute)}
.bmp-case .case-sequence-stage{position:relative;min-width:0}
.bmp-case .case-sequence-stage .bmp-source-window{box-shadow:0 24px 54px var(--shadow-deep),0 0 0 1px var(--line-soft)}
.bmp-case .case-sequence-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,38px);align-items:start}
.bmp-case .case-sequence-item{position:relative;z-index:1;min-width:0}
.bmp-case .case-sequence-item::before{content:attr(data-step);display:block;width:24px;height:24px;margin-bottom:14px;border:1px solid var(--ui-action-border);border-radius:50%;font:var(--weight-bold) var(--text-micro)/22px var(--font-text);text-align:center;color:var(--ink-soft)}
.bmp-case .case-sequence-item:nth-child(2) .bmp-source-window{transform:rotate(2.2deg)}
.bmp-case .case-sequence-item:nth-child(3) .bmp-source-window{transform:rotate(-1.5deg)}
.bmp-case .case-sequence-stage .bmp-art-button{width:100%;max-width:none}
.bmp-case .case-sequence-stage .case-callout{position:relative;z-index:3;margin:24px 0 0 auto}
/* Interaction scene: authentic captures cross-faded by the page; the hotspot marks the control that leads to the next state. */
/* Annotations sit in the breathing space, leaving the screenshot intact. */
.bmp-case .case-callout{position:relative;z-index:2;width:220px;max-width:100%;padding:20px 22px;border:1px solid color-mix(in srgb,var(--ink-violet) 29%,transparent);border-radius:var(--radius-m);background:var(--surface-tint);box-shadow:0 12px 28px var(--shadow-soft);backdrop-filter:blur(8px);transform:rotate(-2deg);transform-origin:50% 25%;pointer-events:none}
.bmp-case .case-callout::before{content:"";position:absolute;width:1px;height:24px;left:28px;bottom:100%;background:var(--ink-violet);mask-image:linear-gradient(transparent,var(--white))}
.bmp-case .case-callout>span{display:block;margin-bottom:8px;font:var(--weight-regular) var(--text-micro)/1.5 var(--font-text);color:var(--ink-violet)}
.bmp-case .case-callout p{margin:0;font:var(--weight-bold) var(--text-body)/1.4 var(--font-text);letter-spacing:-.01em;color:var(--ink)}
.bmp-case .case-focus-art .case-callout{margin:28px -24px 0 auto}
.bmp-case .case-decision-main .case-callout{float:right;margin:28px 0 20px 32px}
.bmp-case .case-decision-main::after{content:"";display:table;clear:both}
.case-callout.is-living{animation:case-note-drift var(--note-duration,6.4s) ease-in-out infinite}
.case-callout--sequence{--note-duration:7.2s;transform:rotate(1.4deg)}
@keyframes case-note-drift{0%,100%{transform:translateY(0) rotate(var(--note-angle,-2deg))}50%{transform:translateY(-4px) rotate(var(--note-mid-angle,-.8deg))}}

/* Flow and Muzi: original store captures on one stage. */
.legacy-case .bmp-opening{padding-block:48px 32px}
.legacy-case .bmp-heading{padding-top:0}
.legacy-case .bmp-intro{max-width:52ch}
.legacy-interface-stage{position:relative;isolation:isolate;min-height:clamp(520px,48vw,690px);overflow:hidden;border-radius:var(--radius-l);background:linear-gradient(145deg,var(--surface) 0%,var(--surface-deep) 55%,var(--surface-tint) 100%);box-shadow:inset 0 0 0 2px var(--line-soft)}
.legacy-interface-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--spectrum-linear);opacity:.07;mask-image:linear-gradient(115deg,transparent 14%,var(--white) 42%,var(--white) 62%,transparent 85%)}
.legacy-interface-stage::after{content:"";position:absolute;z-index:4;inset:0;border-radius:inherit;box-shadow:inset 0 -80px 100px color-mix(in srgb,var(--paper) 72%,transparent);pointer-events:none}
.legacy-interface-stage__view{position:absolute;z-index:1;width:31%;margin:0;transition:transform 420ms var(--ease-out)}
.legacy-interface-stage__view img{display:block;width:100%;height:auto;border-radius:13px;box-shadow:0 30px 70px var(--shadow-deep),0 0 0 1px var(--line-soft)}
.legacy-interface-stage__view figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.legacy-interface-stage__view:nth-child(1){left:5%;top:18%;transform:rotate(-4deg)}
.legacy-interface-stage__view:nth-child(2){left:34.5%;top:5%;z-index:3;width:34%;transform:translateY(0)}
.legacy-interface-stage__view:nth-child(3){right:4%;top:19%;transform:rotate(4deg)}
@media(hover:hover) and (pointer:fine){
 .legacy-interface-stage:hover .legacy-interface-stage__view:nth-child(1){transform:translate(-7px,-8px) rotate(-5deg)}
 .legacy-interface-stage:hover .legacy-interface-stage__view:nth-child(2){transform:translateY(-12px)}
 .legacy-interface-stage:hover .legacy-interface-stage__view:nth-child(3){transform:translate(7px,-8px) rotate(5deg)}
}
.legacy-case .bmp-section-heading{max-width:none;grid-template-columns:1fr}
.legacy-case .bmp-section-heading>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,8vw,120px);align-items:start}
.legacy-case .bmp-section-heading>div:first-child>p{max-width:52ch;margin-top:0}
.legacy-case .bmp-section-heading .section-kicker{grid-column:1/-1}
.legacy-case .bmp-gallery{gap:32px;padding:32px;border-radius:var(--radius-l);background:var(--surface);scroll-padding-inline:32px;scrollbar-color:var(--scrollbar-thumb) var(--surface)}
.legacy-case .bmp-gallery .bmp-art-button{flex-basis:clamp(220px,21vw,290px);margin-top:0}
.legacy-case .bmp-gallery .bmp-source-window{box-shadow:0 12px 28px var(--shadow-soft)}
.legacy-case .bmp-gallery:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.legacy-case .bmp-chapters{border-block-width:2px}
.legacy-identity{display:grid;grid-template-columns:minmax(160px,260px) minmax(0,500px);gap:clamp(32px,7vw,110px);align-items:center;padding-block:40px}
.legacy-identity img{width:100%;height:auto;border-radius:23%}
.legacy-identity h3{margin:0 0 20px;font-family:var(--font-display);font-size:clamp(22px,2.5vw,32px);line-height:1.25}
.legacy-identity p{font-size:var(--text-lead);line-height:1.7;color:var(--ink-mute)}

/* Pixai: opening and galleries made of 16:10 captures of the shipped interface. */
/* Passive loops of real micro-interactions (case_components.clip), played by case.js while visible. */
.bmp-case .case-clip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,8vw,128px);align-items:center;margin-bottom:var(--case-section-space)}
.bmp-case .case-clip--wide{grid-template-columns:1fr;gap:40px}
.bmp-case .case-clip-art{position:relative;isolation:isolate;margin:0;justify-self:center;width:100%}
.bmp-case .case-clip--detail .case-clip-art{width:min(100%,520px)}
.bmp-case .case-clip--narrow .case-clip-art{width:min(100%,280px)}
.bmp-case .case-clip-frame{overflow:hidden;border-radius:var(--radius-s);background:var(--surface-deep);box-shadow:0 30px 70px var(--shadow-deep),0 0 0 1px var(--line-strong)}
.bmp-case .case-clip video{display:block;width:100%;height:auto;pointer-events:none}
.bmp-case .case-clip figcaption{margin-top:14px;font-size:var(--text-caption);color:var(--muted-soft)}
.bmp-case .case-clip-legend{max-width:52ch;margin:10px 0 0;font-size:var(--text-caption);line-height:1.6;color:var(--muted)}
.bmp-case .case-clip-copy{max-width:42ch}
.bmp-case .case-clip--wide .case-clip-copy{max-width:60ch}
.bmp-case .case-clip-copy h3{max-width:18ch;font:var(--weight-bold) clamp(28px,3vw,44px)/1.2 var(--font-text);letter-spacing:-.03em}
.bmp-case .case-clip-copy p{max-width:40ch;margin-top:28px;font-size:var(--text-lead);line-height:1.85;color:var(--ink-mute)}
.bmp-case :is(.case-clip--detail,.case-clip--narrow):nth-of-type(even) .case-clip-art{order:2}
.pixai-case .case-clip-art::before{content:"";position:absolute;z-index:-1;inset:-22% -18%;background:radial-gradient(ellipse at 50% 45%,var(--glow-pixai),transparent 70%);pointer-events:none}
.pixai-case .bmp-opening{margin-right:0;padding:48px 0 32px}
.pixai-case .bmp-heading{padding-top:36px}
.pixai-case .bmp-cover{width:100%;margin:0;align-self:center}
.pixai-stage{position:relative;aspect-ratio:4/3;isolation:isolate}
.pixai-stage__view{position:absolute;margin:0;overflow:hidden;border-radius:var(--radius-s);background:var(--surface-deep);box-shadow:0 30px 70px var(--shadow-deep),0 0 0 1px var(--line-soft)}
.pixai-stage__view img{display:block;width:100%;height:auto}
.pixai-stage .pixai-stage__view:nth-child(1){left:0;top:4%;width:84%;z-index:1}
.pixai-stage .pixai-stage__view:nth-child(2){right:0;top:0;width:34%;z-index:2}
.pixai-stage .pixai-stage__view:nth-child(3){right:4%;bottom:0;width:30%;z-index:3}
.pixai-case .case-wide{aspect-ratio:16/10;background:var(--surface-deep);box-shadow:0 0 0 1px var(--line-strong)}
/* Dark product on a dark page: a violet light behind every capture and a brighter edge give the screens their relief. */
.pixai-case :is(.case-focus-art,.pixai-stage){isolation:isolate}
.pixai-case :is(.case-focus-art,.pixai-stage)::before{content:"";position:absolute;z-index:-1;inset:-22% -18%;background:radial-gradient(ellipse at 50% 45%,var(--glow-pixai),transparent 70%);pointer-events:none}
.pixai-case .case-focus:nth-of-type(odd){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.pixai-case .pixai-stage__view{box-shadow:0 30px 70px var(--shadow-deep),0 0 0 1px var(--line-strong)}
.pixai-case .case-focus{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding-inline:0}
.pixai-case .case-focus:nth-of-type(odd) .case-focus-art{order:2}
.pixai-case .case-focus-art{width:100%}
.pixai-case .case-sequence{grid-template-columns:minmax(200px,.45fr) minmax(0,1.55fr)}
.pixai-case .case-sequence-track{grid-template-columns:repeat(2,minmax(0,1fr))}
.pixai-case .case-sequence-item:nth-child(2) .bmp-source-window{transform:none}

@media(max-width:1100px){
 .wide-case .bmp-opening{grid-template-columns:1fr;gap:clamp(32px,5vw,80px)}
 .legacy-case .bmp-heading{max-width:700px}
 .legacy-interface-stage{min-height:660px}
}
@media(min-width:761px) and (max-width:1100px){
 .bmp-opening{min-height:820px}
 .bmp-cover{width:calc(100% + 280px);margin-left:-190px}
 .bmp-heading h1{font-size:clamp(54px,6vw,72px)}
 .bmp-hero-facts{grid-template-columns:.7fr 1fr 1.15fr}
 .mobile-case .bmp-opening{min-height:820px}
 .mobile-case .bmp-cover{width:calc(100% + 60px);margin-left:-30px}
 .edjing-case .bmp-opening{min-height:720px}
 .edjing-case .bmp-cover{width:104%;margin-left:-2%}
 :is(.mobile-case,.wide-case) .bmp-heading h1{font-size:64px}
 :is(.mobile-case,.wide-case) .bmp-intro{font-size:var(--text-body-s)}
 :is(.mobile-case,.wide-case) .bmp-hero-facts{grid-template-columns:1fr}
 :is(.mobile-case,.wide-case) .bmp-hero-facts>div{display:grid;grid-template-columns:90px 1fr;gap:16px;border:0;padding:16px 0}
 :is(.mobile-case,.wide-case) .bmp-hero-facts>div+div{padding-left:0}
 :is(.mobile-case,.wide-case) .bmp-hero-facts dt{margin:0}
 :is(.mobile-case,.wide-case) .bmp-heading .bmp-scope{font-size:var(--text-caption)}
}
@media(max-width:760px){
 .bmp-case{--case-section-space:76px;--case-block-space:48px;--case-copy-space:24px;padding-top:22px}
 .bmp-case .bmp-top{font-size:var(--text-meta)}
 .bmp-top>span{display:none}
 .bmp-opening{grid-template-columns:1fr;min-height:0;margin:36px 0 0;padding-right:0;overflow:visible}
 .bmp-heading{display:contents}
 .bmp-opening>.bmp-heading>.bmp-identity{order:0}
 .bmp-opening>.bmp-heading>.bmp-intent{order:1}
 .bmp-case .bmp-opening>.bmp-cover{order:2;margin-top:24px;margin-bottom:36px}
 .bmp-opening>.bmp-heading>.bmp-intro{order:3}
 .bmp-opening>.bmp-heading>.bmp-hero-facts{order:4}
 .bmp-opening>.bmp-heading>.bmp-scope{order:5}
 .bmp-case .bmp-identity{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start;width:100%}
 .bmp-case .bmp-identity .bmp-app-icon{grid-column:1;grid-row:1;width:60px;height:60px;margin:5px 0 0;border-radius:13px}
 .bmp-case .bmp-identity h1{grid-column:2;grid-row:1;margin:0;font-size:clamp(46px,17vw,76px);line-height:.98;letter-spacing:-.04em}
 .bmp-case .bmp-heading .bmp-intent{max-width:29ch;margin:28px 0 0;font-size:23px;line-height:1.3;letter-spacing:-.025em}
 .bmp-intro{max-width:47ch;font-size:var(--text-body-s);line-height:1.85}
 .bmp-intro .bmp-link{margin-top:28px}
 .bmp-hero-facts,.wide-case .bmp-hero-facts{grid-template-columns:1fr;margin-top:36px}
 .bmp-hero-facts>div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
 .bmp-hero-facts>div+div{padding-left:0;border-left:0}
 .bmp-hero-facts dt{margin:0}
 .bmp-hero-facts .bmp-rank{font-size:var(--text-body)}
 .bmp-heading .bmp-scope{max-width:none;margin-top:24px}
 .bmp-cover{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));overflow:clip}
 .bmp-scene{width:160%;margin-left:-38%}
 .bmp-pads-plane{left:26%;top:36%}
 .bmp-pad-detail{border-radius:7px}
 .bmp-chapters{margin-top:36px;padding-block:20px;font-size:var(--text-caption)}
 :is(.mobile-case,.wide-case) .bmp-chapters{gap:12px 20px}
 .bmp-pause{margin-left:0}
 .bmp-section{scroll-margin-top:135px}
 .bmp-section-heading{grid-template-columns:1fr;row-gap:40px}
 .bmp-section-heading h2{max-width:15ch}
 .bmp-section-heading>div:first-child p{margin-top:24px;font-size:var(--text-body)}
 .bmp-case h3{font-size:22px}
 .bmp-result{padding:12px 0 12px 24px}
 .bmp-result strong{font-size:60px}
 .bmp-result p{margin:16px 0 12px;font-size:var(--text-ui)}
 .bmp-gallery-wrap{margin-inline:calc(-1 * var(--gutter));padding-top:0}
 .bmp-gallery{gap:20px 24px;padding:24px var(--gutter) 30px}
 .bmp-art-button{flex-basis:78vw;max-width:340px}
 .bmp-gallery-bottom{flex-wrap:wrap;align-items:start;gap:20px 16px}
 .bmp-gallery-bottom p{max-width:24ch;font-size:var(--text-micro)}
 .bmp-gallery-controls{flex-wrap:wrap;gap:12px;max-width:100%}
 .bmp-case .case-gallery-title{margin-bottom:12px;padding-inline:var(--gutter);font-size:var(--text-body)}
 .bmp-editorial{grid-template-columns:1fr;row-gap:24px;margin-block:48px;padding-block:36px}
 .bmp-editorial p{font-size:var(--text-body)}
 .bmp-film{grid-template-columns:1fr;min-height:0}
 .bmp-film>img{height:320px;padding-top:24px}
 .bmp-film-copy{padding:32px 24px 40px}
 .bmp-film-copy>p{margin:20px 0 32px;font-size:27px}
 .bmp-lightbox{padding:18px}
 .bmp-lightbox-art{max-width:100%}
 .bmp-lightbox h2{font-size:var(--text-body-s)}
 .mobile-case .bmp-opening{min-height:0;grid-template-columns:1fr;padding:0;overflow:visible}
 .mobile-case .bmp-cover{width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));overflow:clip}
 .mobile-case .bmp-scene{width:100%;margin:0;aspect-ratio:1.18}
 .edjing-case .case-device img{width:125%;margin-left:-12%}
 .mobile-case .bmp-film{min-height:0}
 .mobile-case .bmp-film>img{height:auto;aspect-ratio:3/2}
 :is(.mobile-case,.wide-case) .bmp-gallery{gap:22px;padding:18px var(--gutter) 26px}
 :is(.mobile-case,.wide-case) .bmp-gallery-bottom{padding-inline:var(--gutter)}
 :is(.mobile-case,.wide-case) .bmp-art-button{flex-basis:76vw;max-width:310px}
 :is(.mobile-case,.wide-case) :is(.case-wide-gallery,.case-cinema-gallery) .bmp-art-button{flex-basis:88vw;max-width:none}
 :is(.mobile-case,.wide-case) .bmp-result strong{font-size:57px}
 :is(.mobile-case,.wide-case) .bmp-lightbox-art .bmp-source-window{width:100%}
 .case-icon-evolution{gap:7%;padding-inline:0}
 .case-icon-evolution figure:first-child{width:24%}
 .case-icon-evolution figure:last-child{width:48%}
 .case-icon-evolution figcaption{font-size:var(--text-caption)}
 .case-icon-evolution strong{font-size:var(--text-ui)}
 .case-evolution-line{width:7%}
 .edjing-case .bmp-opening{grid-template-columns:1fr;gap:0;min-height:0}
 .edjing-case .bmp-cover{width:calc(100% + 2 * var(--gutter));margin:16px calc(-1 * var(--gutter)) 36px}
 .bmp-case .case-decision{grid-template-columns:1fr;gap:40px;margin-bottom:64px}
 .bmp-case .case-decision-control{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:20px;align-items:start;padding-top:28px;border-top:1px solid var(--line-soft)}
 .bmp-case .case-decision-control p{margin-top:0;font-size:var(--text-meta);line-height:1.75}
 .bmp-case .case-decision-main>h3{margin-bottom:28px;font-size:30px}
 .bmp-case .case-decision-control h4{grid-column:1/-1;margin-bottom:20px}
 .bmp-case .case-focus{grid-template-columns:1fr;gap:32px;margin-bottom:64px;padding:0}
 .bmp-case .case-clip{grid-template-columns:1fr;gap:28px;margin-bottom:64px}
 .bmp-case :is(.case-clip--detail,.case-clip--narrow):nth-of-type(even) .case-clip-art{order:0}
 .bmp-case .case-clip-copy h3{font-size:31px}
 .bmp-case .case-clip-copy p{margin-top:20px;font-size:var(--text-body)}
 .bmp-case .case-focus-copy{grid-row:1}
 .bmp-case .case-focus-copy h3{max-width:22ch;font-size:30px}
 .bmp-case .case-focus-copy p{margin-top:20px;font-size:var(--text-body)}
 .bmp-case .case-focus-art{width:78%;max-width:300px}
 .bmp-case .case-sequence{grid-template-columns:1fr;gap:36px;margin-bottom:72px}
 .bmp-case .case-sequence-copy{padding-top:0}
 .bmp-case .case-sequence-copy h3{max-width:18ch;font-size:31px}
 .bmp-case .case-sequence-copy p{margin-top:20px;font-size:var(--text-body)}
 .bmp-case .case-sequence-stage{margin-inline:calc(-1 * var(--gutter));overflow:hidden}
 .bmp-case .case-sequence-track{display:flex;gap:18px;overflow-x:auto;padding:4px var(--gutter) 22px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin}
 .bmp-case .case-sequence-item{flex:0 0 min(78vw,300px);scroll-snap-align:start}
 .bmp-case .case-sequence-item::before{margin-bottom:10px}
 .bmp-case .case-sequence-item:nth-child(2) .bmp-source-window,.bmp-case .case-sequence-item:nth-child(3) .bmp-source-window{transform:none}
 .bmp-case .case-sequence-stage .case-callout{margin:6px var(--gutter) 0 auto}
 .bmp-case .case-callout{width:200px;padding:16px 18px}
 .bmp-case .case-callout p{font-size:var(--text-body-s)}
 .bmp-case .case-focus-art .case-callout{margin:24px -12px 0 auto}
 .bmp-case .case-decision-main .case-callout{float:none;margin:24px 0 28px auto}
 .legacy-case .bmp-opening{padding-block:0 24px;gap:24px 30px}
 .legacy-case .bmp-section-heading>div:first-child{display:block}
 .legacy-case .bmp-section-heading>div:first-child>p{margin-top:24px}
 .legacy-case .bmp-gallery{gap:24px;padding:24px var(--gutter);border-radius:0}
 .legacy-case .bmp-gallery .bmp-art-button{flex-basis:72vw}
 .legacy-case .bmp-chapters{gap:20px}
 .legacy-interface-stage{min-height:clamp(410px,126vw,520px);margin-inline:calc(-1 * var(--gutter));border-radius:0}
 .legacy-interface-stage__view{width:37%}
 .legacy-interface-stage__view:nth-child(1){left:-3%;top:17%}
 .legacy-interface-stage__view:nth-child(2){left:31%;width:42%}
 .legacy-interface-stage__view:nth-child(3){right:-3%;top:18%}
 .legacy-identity{grid-template-columns:1fr;gap:28px;padding-block:16px}
 .legacy-identity img{width:160px}
 .pixai-case .bmp-opening{margin-top:32px;padding:0}
 .pixai-case .bmp-identity{grid-template-columns:1fr}
 .pixai-case .bmp-identity h1{grid-column:1}
 .pixai-case .bmp-cover{width:100%;margin-inline:0;overflow:visible}
 .pixai-case .case-focus{grid-template-columns:1fr;gap:32px}
 .pixai-case .case-focus:nth-of-type(odd) .case-focus-art{order:initial}
 .pixai-case .case-focus-art{width:100%;max-width:none}
 .pixai-case .case-sequence{grid-template-columns:1fr}
 .pixai-stage{display:grid;gap:14px;aspect-ratio:auto}
 .pixai-stage .pixai-stage__view:nth-child(n){position:static;width:100%}
}
@media(prefers-reduced-motion:reduce){
 .bmp-motion .bmp-gallery-wrap,.bmp-motion .bmp-film{opacity:1;transform:none;clip-path:none;transition:none}
 .bmp-art-button .bmp-source-window,.legacy-interface-stage__view{transition:none}
 .bmp-motion :is(.case-focus,.case-sequence)[data-case-reveal]{transition:none}
 .bmp-motion :is(.case-focus,.case-sequence)[data-case-reveal]:not(.is-inview){opacity:1;transform:none}
 .case-callout.is-living{animation:none}
}

/* Conclusion and next project, shared by every case. */
.project-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,8vw,120px);padding:clamp(48px,6vw,88px) 0;border-top:var(--ui-rule) solid var(--line);scroll-margin-top:130px}
.project-results h2{margin:0;font:var(--weight-semibold) var(--text-subheading)/1.15 var(--font-display);letter-spacing:-.04em}
.project-results__context p{max-width:58ch;margin:0;font:var(--weight-regular) var(--text-body)/1.75 var(--font-text);color:var(--ink-mute)}
.project-results__context p+p{margin-top:20px}
.project-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,6vw,88px);padding:clamp(40px,5vw,72px) 0;border-top:var(--ui-rule) solid var(--line);color:var(--ink);text-decoration:none}
.project-next>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-m)}
.project-next>div{position:relative}
.project-next__label{font:var(--weight-bold) var(--text-meta)/1.5 var(--font-text);color:var(--muted)}
.project-next strong{display:block;margin:20px 0 16px;font:var(--weight-semibold) var(--text-heading)/1.15 var(--font-display);letter-spacing:-.04em}
.project-next p{max-width:32ch;margin:0;font:var(--weight-regular) var(--text-lead)/1.5 var(--font-text);color:var(--ink-mute)}
.project-next .project-next__action{display:inline-flex;margin-top:28px}
.project-next:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
@media(max-width:760px){
 .project-results,.project-next{grid-template-columns:1fr;gap:32px}
 .project-next strong{margin-block:14px}
}