/* Health & Body / Case 07. Source identity, progressively enhanced motion. */
@font-face{font-family:HB Display;src:url('/assets/work/health-body/bebas-neue-latin.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:HB Inter;src:url('/assets/work/health-body/inter-latin-variable.woff2') format('woff2');font-display:swap;font-weight:100 900}
.work-card--health::before{background:linear-gradient(180deg,transparent 57%,#0b1220 94%)}
.work-webgl-ready .work-archive:not(.is-list-view) .work-card--health .work-card__media{opacity:1}
.hb-preview{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 90% 0,#1b39ff60,transparent 62%),#0b1220;color:#f4f6fb}
.hb-preview__brand{position:absolute;top:6%;left:7%;font:400 clamp(18px,2.5vw,30px)/1 'HB Display',Impact,sans-serif;letter-spacing:.025em;display:grid;gap:5px}
.hb-preview__brand b{font-weight:400}.hb-preview__brand em{font-style:normal;color:#f2c500}.hb-preview__brand small{font:500 5px/1.3 'IBM Plex Mono',monospace;letter-spacing:.12em}
.hb-preview__ruler{position:absolute;left:0;top:0;width:100%;height:100%;fill:none;stroke:#f2c500;stroke-width:1;opacity:.6}
.hb-preview__ruler path{stroke-dasharray:1;animation:hb-preview-line 9s ease infinite alternate paused}
.hb-preview__desktop{position:absolute;left:5%;top:25%;width:82%;background:#f4f6fb;border:2px solid #d7dce9;border-radius:7px;overflow:hidden;box-shadow:0 20px 32px #0007;transform:rotate(-3deg);animation:hb-preview-desktop 9s cubic-bezier(.22,.75,.2,1) infinite alternate both paused}
.hb-preview__chrome{height:14px;display:flex;gap:4px;align-items:center;padding-left:7px;background:#e7eaf3}
.hb-preview__chrome i{display:block;width:3px;height:3px;border-radius:50%;background:#677287}
.hb-preview__phone{position:absolute;top:35%;right:5%;width:24%;background:#f4f6fb;border:3px solid #d7dce9;border-radius:12px;overflow:hidden;box-shadow:0 16px 30px #0008;transform:rotate(4deg);animation:hb-preview-phone 9s cubic-bezier(.22,.75,.2,1) infinite alternate both paused}
.work-card--health .work-card__media .hb-preview__screen,.health-case-page .hb-preview__screen{position:static;display:block;inset:auto;width:100%;height:auto;object-fit:contain;transform:none;transition:none}
.hb-preview.is-layer-active *{animation-play-state:running}
.work-motion-paused .hb-preview *{animation-play-state:paused!important}
.work-data-saver .hb-preview *,.work-archive.is-list-view .hb-preview *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
@keyframes hb-preview-desktop{0%,8%{opacity:.15;transform:translate(-9%,14%) rotate(-7deg) scale(.95)}36%,85%{opacity:1;transform:rotate(-3deg)}100%{opacity:1;transform:translateY(-3px) rotate(-2deg)}}
@keyframes hb-preview-phone{0%,18%{opacity:0;transform:translate(15%,-18%) rotate(9deg) scale(.92)}48%,85%{opacity:1;transform:rotate(4deg)}100%{opacity:1;transform:translateY(4px) rotate(3deg)}}
@keyframes hb-preview-line{0%,10%{stroke-dashoffset:1;opacity:.1}55%,100%{stroke-dashoffset:0;opacity:.75}}

.health-case-page{--hb-ink:#0b1220;--hb-signal:#1b39ff;--hb-plate:#f2c500;--hb-chalk:#f4f6fb;--hb-line:#cbd0dd;background:var(--hb-chalk);color:var(--hb-ink)}
.health-case-page .ocean,.health-case-page .depth-gauge{display:none}
.health-case-page .site-header{background:#0b1220f5;border-bottom:1px solid #cbd0dd33}
.health-case-page main{background:var(--hb-chalk);font-family:'HB Inter',Arial,sans-serif;position:relative}
.hb-shell{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.hb-section{padding:clamp(44px,5vw,72px) 0}
.hb-section--white{background:#fff}
.hb-kicker{font:400 .68rem/1.5 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--hb-signal);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.hb-kicker::before{content:'';width:22px;height:2px;background:currentColor;flex:none}
.health-case-page main :is(h1,h2,h3){font-family:'HB Inter',Arial,sans-serif;font-weight:550;color:inherit;text-transform:none;letter-spacing:-.045em}
.health-case-page main h1{font-size:clamp(3.8rem,6.5vw,6.4rem);line-height:1.02;margin:0 0 26px}
.health-case-page main h2{font-size:clamp(2.1rem,3.7vw,3.6rem);line-height:1.1;margin:0 0 20px}
.health-case-page main h3{font-size:clamp(1.6rem,2.5vw,2.25rem);line-height:1.14;margin:0 0 18px}
.health-case-page main p{font-size:1rem;line-height:1.75;max-width:61ch}
.health-case-page main .hb-kicker{font-size:.68rem;line-height:1.5}
.hb-hero{padding:142px 0 42px}
.hb-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:5%;align-items:center}
.hb-title-line{display:block;overflow:hidden;padding-bottom:.07em}.hb-title-line>span{display:block}.hb-title-line em{color:var(--hb-signal);font-style:normal}
.hb-lead{color:#475269}.health-case-page main .hb-lead{font-size:1.05rem;line-height:1.7}
.hb-hero-art{position:relative;aspect-ratio:1.14;border-radius:8px;overflow:hidden;background:var(--hb-ink)}
.hb-hero-art .hb-preview__brand{font-size:clamp(26px,3.1vw,42px)}.hb-hero-art .hb-preview__brand small{font-size:7px}
.hb-hero-art .hb-preview__desktop{top:28%}.hb-hero-art .hb-preview__phone{top:37%;width:23%}
.hb-meta{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:28px;border-top:1px solid var(--hb-line);padding-top:22px;margin:30px 0 0;font:.72rem/1.6 'IBM Plex Mono',monospace}.hb-meta dt{color:var(--hb-signal);margin-bottom:6px}.hb-meta dd{margin:0}
.hb-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:start}
.hb-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:28px 0 0}
.hb-swatch{min-height:108px;background:var(--swatch);color:var(--swatch-ink);border:1px solid #0b122018;padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;font:.65rem/1.5 'IBM Plex Mono',monospace}.hb-swatch strong{font-weight:400}
.hb-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;border:1px solid currentColor;color:inherit;background:transparent;font:500 .72rem/1.4 'IBM Plex Mono',monospace;text-decoration:none;cursor:pointer}
.hb-button--primary{color:white;background:var(--hb-signal);border-color:var(--hb-signal)}
.hb-button[hidden]{display:none!important}
.hb-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.health-case-page main :is(a,button):focus-visible{outline:3px solid var(--hb-signal);outline-offset:4px}
.hb-caption{color:#58637b;font:.68rem/1.65 'IBM Plex Mono',monospace;margin:14px 0 0}.health-case-page main .hb-caption{font-size:.68rem;line-height:1.65}
.hb-film{margin:0 auto;max-width:1100px;border:1px solid var(--hb-line);border-radius:7px;overflow:hidden;background:var(--hb-ink)}
.hb-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.hb-film figcaption{background:var(--hb-chalk);color:#58637b;font:.68rem/1.65 'IBM Plex Mono',monospace;padding:16px 20px}
.hb-film-heading{margin-bottom:26px;display:flex;gap:28px;justify-content:space-between;align-items:end}.hb-film-heading h2{margin-bottom:0!important}.hb-film-heading .hb-caption{max-width:42ch}
.hb-service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:28px 0 0}.hb-service-list>li{margin:0;min-width:0}
.hb-service{border:1px solid var(--hb-line);padding:18px 14px;background:#fff;text-decoration:none;min-height:172px;display:flex;flex-direction:column;gap:16px;color:var(--hb-ink)}
.hb-service span{font:.65rem 'IBM Plex Mono',monospace;color:var(--hb-signal)}
.health-case-page main .hb-service strong{font:550 1.35rem/1.25 'HB Inter',Arial,sans-serif;letter-spacing:-.03em;text-transform:none;margin:auto 0}
.hb-service b{font:.68rem 'IBM Plex Mono',monospace;font-weight:400}.hb-service:hover{border-color:var(--hb-signal);background:#f4f6fb}
.hb-screen{border:1px solid var(--hb-line);border-radius:6px;overflow:hidden;margin:28px 0 0;background:var(--hb-chalk)}
.hb-screen img{display:block;width:100%;height:auto;transform-origin:50% 50%}.hb-screen figcaption{padding:12px 16px;margin:0}
.hb-journey-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.hb-journey{background:var(--hb-ink);color:var(--hb-chalk);padding:24px;border-radius:7px;overflow:hidden}
.hb-stage{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:6%}
.hb-stage-copy{padding:10px 18px}.health-case-page main .hb-stage-copy h3{font-size:clamp(1.9rem,3vw,2.7rem)}
.hb-stage-copy .hb-kicker{color:var(--hb-plate)}.hb-stage-copy p:not(.hb-kicker){color:#c5cedf}
.hb-stage-image{margin:0;overflow:hidden;border-radius:4px;aspect-ratio:16/10;background:#141e30}
.hb-stage-image img{width:100%;height:100%;object-fit:cover;display:block}
.hb-step-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:24px}
.hb-step{padding:13px 4px;min-height:46px;background:transparent;color:#c5cedf;border:0;border-top:2px solid #596578;cursor:pointer;font:.65rem/1.3 'IBM Plex Mono',monospace}
.hb-step[aria-pressed=true]{color:var(--hb-plate);border-color:var(--hb-plate)}
.hb-timeline{height:4px;background:repeating-linear-gradient(90deg,#5b6578 0 1px,transparent 1px calc(100% / 28));position:relative;margin-top:20px}
.hb-timeline i{position:absolute;inset:0;transform:scaleX(var(--hb-progress,.125));transform-origin:left;background:var(--hb-signal);transition:transform .7s ease}.hb-timeline::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:var(--hb-plate);top:-2px;left:calc(var(--hb-progress,.125)*100% - 4px);transition:left .7s ease}
.hb-visit-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px}.hb-visit-controls .hb-caption{margin:0;color:#c5cedf}.hb-visit-controls .hb-button:disabled{opacity:.4;cursor:default}
.health-case-page .hb-journey :is(button,a):focus-visible{outline-color:var(--hb-plate)}
.hb-delivery{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%}
.hb-motion-ready .hb-reveal.is-pending{opacity:0;transform:translateY(22px)}.hb-motion-ready .hb-reveal{transition:opacity .75s ease,transform .85s cubic-bezier(.22,.75,.2,1)}
.hb-motion-ready .hb-title-line>span{animation:hb-type-rise .95s cubic-bezier(.22,.75,.2,1) both;animation-delay:var(--text-delay,0ms)}
.hb-motion-ready .hb-palette.is-pending .hb-swatch{opacity:0;transform:translateY(18px)}.hb-motion-ready .hb-swatch{transition:opacity .65s ease,transform .8s ease;transition-delay:var(--item-delay,0ms)}
.hb-motion-ready .hb-service-list.is-pending .hb-service{opacity:0;transform:translateY(20px)}.hb-motion-ready .hb-service{transition:opacity .7s ease,transform .85s ease,background .2s ease,border-color .2s ease;transition-delay:var(--item-delay,0ms)}
.hb-motion-ready .hb-screen.is-revealed img{animation:hb-image-settle 1.5s cubic-bezier(.22,.7,.2,1) both}
.hb-motion-ready .hb-stage.is-entering .hb-stage-copy{animation:hb-stage-copy .65s ease both}.hb-motion-ready .hb-stage.is-entering .hb-stage-image img{animation:hb-stage-image 1.15s cubic-bezier(.22,.7,.2,1) both}
@keyframes hb-type-rise{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes hb-image-settle{from{transform:scale(1.04);opacity:.6}to{transform:scale(1);opacity:1}}
@keyframes hb-stage-copy{from{opacity:.1;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes hb-stage-image{from{opacity:.2;transform:scale(1.035);clip-path:inset(0 0 0 5%)}to{opacity:1;transform:scale(1);clip-path:inset(0)}}
@media(max-width:800px){
 .hb-shell{width:calc(100% - 40px)}.hb-hero{padding:112px 0 36px}.hb-hero-grid,.hb-split,.hb-delivery{grid-template-columns:1fr;gap:28px}.health-case-page main h1{font-size:clamp(4.4rem,15vw,6.5rem)}.hb-hero-art{max-width:580px;width:100%;margin-inline:auto}.hb-hero-art .hb-preview__brand{font-size:32px}
 .hb-meta{grid-template-columns:1fr;gap:15px;margin-top:24px}.hb-meta>div{display:grid;grid-template-columns:80px 1fr;gap:12px}.hb-palette{grid-template-columns:repeat(2,1fr)}.hb-film-heading,.hb-journey-head{align-items:start;flex-direction:column;gap:8px}.hb-film{max-width:360px}.hb-film video{aspect-ratio:9/16}.hb-film figcaption{padding:14px 16px}.hb-service-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-service{min-height:145px}.hb-service-list>li:last-child{grid-column:1/-1}.hb-service-list>li:last-child .hb-service{min-height:108px}.hb-stage{grid-template-columns:1fr;gap:16px}.hb-stage-copy{padding:0}.hb-stage-copy p{min-height:3.5em;margin-bottom:0}.hb-stage-image{aspect-ratio:4/3}.hb-journey{padding:20px}.hb-step-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hb-screen img{min-height:190px;object-fit:cover;object-position:50% 50%}
}
@media(prefers-reduced-motion:reduce){
 .hb-preview *,.hb-motion-ready .hb-title-line>span,.hb-motion-ready .hb-screen img,.hb-motion-ready .hb-stage>*{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
 .hb-motion-ready .hb-reveal,.hb-motion-ready .hb-swatch,.hb-motion-ready .hb-service{opacity:1!important;transform:none!important;transition:none!important}.hb-title-line>span{transform:none!important}.hb-timeline i,.hb-timeline::after{transition:none}
}
/* Compact four-column stage index and current Inter heading scale on phones. */
@media(max-width:800px){
 .health-case-page main h1{font-size:clamp(3.35rem,12vw,4.7rem)}
 .hb-step-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .hb-step{font-size:.6rem;padding-inline:1px;overflow-wrap:anywhere}
 .hb-stage-copy p{min-height:7em}
 .hb-visit-controls{gap:8px}.hb-visit-controls .hb-button{padding:10px;font-size:.65rem}.hb-visit-controls .hb-caption{font-size:.6rem;white-space:nowrap}
}
@media print{.hb-hero{padding-top:30px}.hb-reveal,.hb-swatch,.hb-service{opacity:1!important;transform:none!important}.hb-film,.hb-actions,.hb-journey-head button{display:none}}
