/* Work index, October 2026 revamp: four projects in Web & Digital Experience, grouped as Rice Logic engagements and
   representative professional experience. Loaded by work.html only, after work.css; work.css and the case study are
   unchanged. Reuses the shared system (cols, sec-head, frame, reg, sheet, pv, dim, mx-svg, rv, resolve). */

/* ---------- groups and project rhythm ---------- */
.wx-group{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;gap:20px;align-items:center;margin-bottom:clamp(40px,4.4vw,72px)}
.wx-group .rule{height:1px;background:var(--line)}
.wx-group-k{color:var(--gold)}
.wx-group-n{color:var(--ink2)}
.wx-group.wx-g2{margin-top:clamp(120px,12vw,200px)}
.wx-proj+.wx-proj{margin-top:clamp(112px,11vw,184px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--line)}
@media (max-width:640px){.wx-group{grid-template-columns:1fr;gap:8px}.wx-group .rule{display:none}}

/* titles: client names are short, project titles can run long */
.feat-title.is-long{font-size:clamp(40px,4.9vw,92px);line-height:.94;text-wrap:balance}
.feat-org.is-proj{max-width:16em;text-wrap:balance}

/* challenge and delivery, beside the scope tags */
.wx-brief{grid-column:1 / span 6;border-top:1px solid var(--line)}
.wx-brief div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.wx-brief dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.wx-brief dd{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.62;color:var(--ink2)}
@media (max-width:1100px){.wx-brief{grid-column:1 / -1}}
@media (max-width:520px){.wx-brief div{grid-template-columns:1fr;gap:8px}}
.wx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.wx-acts .btn{height:50px}
.wx-ext{font-size:.9em;margin-left:-2px}
.wx-prep{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink2)}
.wx-prep::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--gold)}

/* real screens inside the device frames (the shared .frame img zoom is for editorial photography, not screens) */
.rl .frame .dev-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform:none;will-change:auto;max-width:none}
.dev-desk .dev-screen:has(.dev-img){background:#0B0D0E}
.dev-phone:has(.dev-img){aspect-ratio:422.3 / 864}
.ann-p.wx-ann-r .ann-t{text-align:right}
@media (max-width:700px){
 [data-slot="work-p01-cover"] .dev-desk{display:none}
 [data-slot="work-p01-cover"] .pl-phone{display:flex;justify-content:center;align-items:center}
 [data-slot="work-p01-cover"] .dev-phone{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:100%}
}

/* ---------- project 01: service discovery to booking ---------- */
.rl .wx-seq{margin-top:clamp(28px,3vw,44px);padding:clamp(52px,5.4vw,88px) clamp(28px,4.6vw,76px) clamp(56px,5.6vw,92px)}
.rl .wx-arch{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:baseline;margin-bottom:clamp(32px,3.4vw,52px);padding-bottom:clamp(20px,2.2vw,32px);border-bottom:1px solid var(--line)}
.wx-arch .wx-arch-l{display:flex;flex-wrap:wrap;gap:4px 14px}
.wx-arch .mono{color:var(--ink2)}
.wx-arch .wx-arch-k{color:var(--gold)}
.wx-steps{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.2vw,52px);align-items:start}
.wx-step{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.wx-step-k{color:var(--ink2)}
.wx-step-a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.wx-step-a span{display:block;color:var(--mute)}
.wx-shot{position:relative;border-radius:6px;overflow:hidden;background:#141412;box-shadow:0 0 0 1px rgba(241,238,231,.16),0 24px 40px -22px rgba(0,0,0,.85)}
.wx-shot .dev-chrome{display:block}
.wx-shot-scr{position:relative;aspect-ratio:1440 / 900;overflow:hidden;background:#0B0D0E}
.rl .wx-shot-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform:none;will-change:auto}
/* connectors: a hairline from each screen to the next */
.wx-step:not(:last-child)::after{content:"";position:absolute;top:calc(30px + 9.5%);left:calc(100% + 8px);width:calc(clamp(28px,3.2vw,52px) - 16px);height:1px;background:rgba(241,238,231,.4);transform-origin:0 50%}
/* outbound: booking leaves the site for Perceny */
.wx-out{position:absolute;right:-1px;top:-1px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:0 6px 0 10px;background:var(--gold);color:#0A0A09}
.wx-out svg{display:block}
.anim .wx-seq .wx-step::after{transform:scaleX(0);transition:transform .9s var(--e-settle)}
.anim .wx-seq.in .wx-step::after{transform:none}
.anim .wx-seq.in .wx-step:nth-child(2)::after{transition-delay:.2s}
.anim .wx-seq .wx-out{opacity:0;transform:scale(.6);transition:opacity .5s var(--e-enter) .7s,transform .6s var(--e-settle) .7s}
.anim .wx-seq.in .wx-out{opacity:1;transform:none}
@media (max-width:900px){
 .rl .wx-seq{padding:44px 24px 52px}
 .rl .wx-arch{grid-template-columns:1fr}
 .wx-steps{grid-template-columns:1fr;gap:0}
 .wx-step{display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;row-gap:8px;padding-bottom:30px}
 .wx-step .wx-step-k{grid-column:2;grid-row:1}
 .wx-step .wx-step-a{grid-column:2;grid-row:2}
 .wx-step .wx-shot{grid-column:1;grid-row:1 / span 3;border-radius:14px;box-shadow:0 0 0 1px rgba(241,238,231,.24),0 18px 30px -16px rgba(0,0,0,.85)}
 .wx-step .wx-shot .dev-chrome{display:none}
 .wx-step .wx-shot-scr{aspect-ratio:390 / 844}
 .wx-step:not(:last-child)::after{top:auto;bottom:6px;left:56px;width:1px;height:20px;transform-origin:50% 0}
 .anim .wx-seq .wx-step::after{transform:scaleY(0)}
 .wx-out{width:28px;height:28px;border-radius:0 14px 0 10px}
}

/* ---------- project 02: website plus promotional creative ---------- */
.rl .wx-split{padding:clamp(48px,5.2vw,84px) clamp(28px,4.4vw,72px) clamp(60px,6vw,96px)}
.wx-split-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.38fr);gap:clamp(28px,4vw,64px);align-items:end}
.wx-web{position:relative;aspect-ratio:1.5}
.wx-web .dev-desk{left:0;top:0;width:88%}
.wx-web .dev-phone{right:0;bottom:0;width:23%}
.wx-reel-wrap{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.wx-reel{position:relative;width:100%;aspect-ratio:9 / 16;border-radius:10px;overflow:hidden;background:#140C10;box-shadow:0 0 0 1px rgba(241,238,231,.2),-12px 26px 40px -16px rgba(0,0,0,.85)}
.rl .wx-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform:none;will-change:auto}
.wx-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.4;text-wrap:balance}
.wx-tag b{font-weight:400;color:var(--gold)}
.wx-web-tag{position:absolute;left:0;bottom:-30px}
.anim .wx-split.resolve .dev-desk{transition:opacity .5s var(--e-enter),transform .56s var(--e-settle)}
.anim .wx-split.resolve .dev-phone{transition:opacity .48s var(--e-enter) .18s,transform .56s var(--e-settle) .18s}
.anim .wx-split.resolve .wx-reel{transition:opacity .5s var(--e-enter) .3s,transform .6s var(--e-settle) .3s}
.anim .wx-split.resolve:not(.in) .dev-desk{opacity:0;transform:translateY(10px)}
.anim .wx-split.resolve:not(.in) .dev-phone{opacity:0;transform:translateY(14px) scale(.965)}
.anim .wx-split.resolve:not(.in) .wx-reel{opacity:0;transform:translateY(16px)}
.anim .wx-split.resolve{filter:none;transition:opacity .36s var(--e-enter)}
@media (max-width:700px){
 .rl .wx-split{padding:40px 20px 52px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
 /* phone first: the mobile website and the promotional video side by side, at equal height */
 .wx-split-in{grid-template-columns:minmax(0,.4888fr) minmax(0,.5625fr);gap:16px;align-items:start}
 .wx-web{aspect-ratio:auto}
 .wx-web .dev-desk{display:none}
 .wx-web .dev-phone{position:relative;right:auto;bottom:auto;width:100%}
 .wx-web-tag{position:static;display:block;margin-top:12px}
 .wx-reel{border-radius:12px}
}

/* ---------- drawings (mx-svg) inside a drawing-sheet frame ---------- */
.rl .wx-plan{margin-top:clamp(28px,3vw,44px);padding:clamp(52px,5vw,84px) clamp(28px,4.2vw,72px) clamp(58px,5.6vw,92px)}
.wx-plan .mx-svg{position:relative;z-index:1;display:block;width:100%;height:auto}
.wx-plan .wx-mob{display:none;max-width:440px;margin:0 auto}
@media (max-width:700px){
 .rl .wx-plan{padding:40px 16px 44px}
 .wx-plan .wx-desk{display:none}
 .wx-plan .wx-mob{display:block}
}
.mx-svg .wx-lbl-s{font-size:20px}
.mx-svg .wx-lbl-xs{font-size:18px}
.mx-svg .wx-lbl-m{font-size:19px}
.mx-svg .wx-note{font-family:var(--mono);font-size:14px;letter-spacing:.02em;fill:rgba(241,238,231,.62)}
.mx-svg .wx-note-s{font-size:13px}
.mx-svg .wx-sub{font-family:var(--sans);font-size:14px;letter-spacing:0;fill:rgba(241,238,231,.62)}
.mx-svg .wx-btn{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;fill:rgba(241,238,231,.82)}
.mx-svg .wx-btn-on{fill:var(--gold)}
.mx-svg .wx-xxs{font-size:13px;letter-spacing:.06em;fill:rgba(241,238,231,.66)}
.mx-svg .wx-xxs.d-tg{fill:var(--gold)}
.mx-svg .wx-thin{stroke-width:1.2}
.mx-svg .wx-dash{stroke-dasharray:6 6}
.mx-svg .wx-boundary{fill:none;stroke-width:1.2}
.mx-svg .wx-lock{fill:#0C0C0B;stroke:rgba(241,238,231,.55);stroke-width:1.4}
.mx-svg .wx-lockl{fill:none;stroke:rgba(241,238,231,.55);stroke-width:1.6}
/* dashed connections fade in after the solid ones have drawn */
.anim .resolve .wx-dash{opacity:0;transition:opacity .6s var(--e-enter) .9s}
.anim .resolve.in .wx-dash{opacity:1}

/* ---------- project 03: proof and the directory dependency ---------- */
.wx-proof{margin-top:clamp(36px,4vw,64px);align-items:start}
.wx-stats{grid-column:1 / span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--line)}
.wx-stat{display:flex;flex-direction:column;gap:8px;padding-top:18px}
.wx-stat-n{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4vw,72px);line-height:.9;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.wx-stat-n em{color:var(--gold)}
.wx-stat .mono{color:var(--ink2)}
.rl .wx-flow{grid-column:7 / span 6;border-top:1px solid var(--line)}
.wx-flow li{display:grid;grid-template-columns:44px 132px minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.wx-flow li .mono:first-child{color:var(--dim)}
.wx-flow li.is-key .mono:first-child{color:var(--gold)}
.wx-flow li>span:last-child{font-size:15px;line-height:1.5;color:var(--ink)}
@media (max-width:1100px){.wx-stats,.rl .wx-flow{grid-column:1 / -1}}
@media (max-width:520px){.wx-flow li{grid-template-columns:32px minmax(0,1fr)}.wx-flow li>span:last-child{grid-column:2}}

/* ---------- project 04: one platform, multiple journeys ---------- */
.wx-jr{margin-top:clamp(56px,6vw,96px)}
.wx-jr-head{align-items:end;margin-bottom:clamp(24px,2.6vw,40px)}
.wx-jr-t{grid-column:1 / span 7;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.4vw,80px);line-height:.95;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.wx-jr-t em{color:var(--gold)}
.wx-jr-s{grid-column:8 / span 5;color:var(--ink2);line-height:1.8}
@media (max-width:1000px){.wx-jr-t,.wx-jr-s{grid-column:1 / -1}}
.wx-tabs{display:none}
.wx-jr.wx-tabs-on .wx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.wx-tab{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:baseline;gap:12px;min-height:56px;padding:16px 16px 18px 0;cursor:pointer}
.wx-tab:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.wx-tab::before{content:"";position:absolute;left:0;right:16px;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e-settle)}
.wx-tab[aria-selected="true"]::before{transform:none}
.wx-tab .mono{color:var(--dim);transition:color .4s}
.wx-tab[aria-selected="true"] .mono{color:var(--gold)}
.wx-tab-t{font-family:var(--serif);font-size:clamp(20px,1.8vw,28px);line-height:1.05;color:var(--mute);transition:color .4s}
.wx-tab[aria-selected="true"] .wx-tab-t,.wx-tab:hover .wx-tab-t{color:var(--ink)}
@media (max-width:700px){
 .wx-jr.wx-tabs-on .wx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wx-tab{min-height:48px;padding:12px 12px 14px 0;border-bottom:1px solid var(--line)}
 .wx-tab::before{right:12px}
}
/* without the script every journey shows, one after another; with it, one at a time */
.wx-tp+.wx-tp{margin-top:clamp(48px,5vw,80px)}
.wx-tabs-on .wx-tp+.wx-tp{margin-top:0}
.wx-tabs-on .wx-tp[hidden]{display:none}
.wx-tp:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.anim .wx-tabs-on .wx-tp.is-shown{animation:fade .44s var(--e-enter) both}

/* ---------- close of the panel ---------- */
.rl .wx-more{display:flex;align-items:center;gap:16px;margin-top:clamp(96px,10vw,168px);padding-top:28px;border-top:1px solid var(--line)}
.wx-more .mono{color:var(--ink2)}

/* ---------- anonymized healthcare-society reconstruction (project 04): its own identity, invented content ---------- */
.dev-page .h-paper{fill:#F7F5F0}
.dev-page .h-white{fill:#FFFFFF}
.dev-page .h-pine{fill:#123A33}
.dev-page .h-pine2{fill:#0C2A24}
.dev-page .h-teal{fill:#1F7A68}
.dev-page .h-mint{fill:#E4EFE9}
.dev-page .h-skybar{fill:#8CBFD6}
.dev-page .h-markbg{fill:#123A33}
.dev-page .h-ring{fill:none;stroke:#FFFFFF;stroke-width:2.4}
.dev-page .h-ring2{fill:none;stroke:#8CC3DD;stroke-width:2.4}
.dev-page .h-rule{fill:none;stroke:#DAE2DD;stroke-width:1.5}
.dev-page .h-card{fill:#FFFFFF;stroke:#DAE2DD;stroke-width:1.5}
.dev-page .h-icobg{fill:#E4EFE9}
.dev-page .h-ico{fill:none;stroke:#1F7A68;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dev-page .h-ico-n{fill:none;stroke:#123A33;stroke-width:2}
.dev-page .h-line-w{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.5}
.dev-page .h-dot{fill:rgba(255,255,255,.08)}
.dev-page .h-orb1{fill:rgba(140,195,221,.14);stroke:rgba(140,195,221,.5);stroke-width:1.5}
.dev-page .h-orb2{fill:rgba(228,239,233,.07);stroke:rgba(228,239,233,.36);stroke-width:1.5}
.dev-page .h-net{fill:none;stroke:rgba(140,195,221,.5);stroke-width:1.5}
.dev-page .h-node{fill:#123A33;stroke:#8CC3DD;stroke-width:1.8}
.dev-page .h-node-on{fill:#8CC3DD;stroke:#E4EFE9;stroke-width:2}
.dev-page .h-chip{fill:#FFFFFF;stroke:#B9CEC5;stroke-width:1.5}
.dev-page .h-chipm{fill:#E4EFE9}
.dev-page .h-burger{fill:none;stroke:#123A33;stroke-width:2.6;stroke-linecap:round}
.dev-page .h-opt{fill:#FFFFFF;stroke:#D3DDD8;stroke-width:1.5}
.dev-page .h-opt-on{fill:#F1F7F4;stroke:#1F7A68;stroke-width:2}
.dev-page .h-radio{fill:#FFFFFF;stroke:#9DB3AA;stroke-width:2}
.dev-page .h-radio-on{fill:#1F7A68}
.dev-page .h-tick{fill:#1F7A68}
.dev-page .h-util{font-size:13px;font-weight:500;fill:rgba(255,255,255,.76)}
.dev-page .h-brand1{font-size:17px;font-weight:800;fill:#10231F;letter-spacing:-.01em}
.dev-page .h-brand2{font-size:10px;font-weight:700;fill:#1F7A68;letter-spacing:.3em}
.dev-page .h-nav{font-size:16px;font-weight:600;fill:#10231F}
.dev-page .h-btn{font-size:16px;font-weight:700;fill:#FFFFFF}
.dev-page .h-btn-d{font-size:16px;font-weight:700;fill:#123A33}
.dev-page .h-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;fill:#9FCDE2}
.dev-page .h-h1{font-size:52px;font-weight:700;letter-spacing:-.02em;fill:#FFFFFF}
.dev-page .h-lead{font-size:18px;fill:rgba(255,255,255,.8)}
.dev-page .h-card-h{font-size:20px;font-weight:700;fill:#10231F}
.dev-page .h-card-s{font-size:14px;fill:#55675F}
.dev-page .h-arrow{font-size:20px;font-weight:600;fill:#1F7A68}
.dev-page .h-k{font-size:12px;font-weight:800;letter-spacing:.12em;fill:#1F7A68}
.dev-page .h-title{font-size:24px;font-weight:700;fill:#10231F;letter-spacing:-.01em}
.dev-page .h-chip-t{font-size:14px;font-weight:700;fill:#123A33}
.dev-page .h-chip-t2{font-size:12px;font-weight:700;fill:#123A33}
.dev-page .h-sec{font-size:26px;font-weight:700;fill:#10231F}
.dev-page .h-link{font-size:15px;font-weight:700;fill:#1F7A68}
.dev-page .h-date{font-size:12px;font-weight:800;letter-spacing:.1em;fill:#1F7A68}
.dev-page .h-news{font-size:18px;font-weight:700;fill:#10231F}
.dev-page .h-crumb{font-size:13px;fill:#55675F}
.dev-page .h-small{font-size:15px;fill:#55675F}
.dev-page .h-opt-t{font-size:17px;font-weight:700;fill:#10231F}
.dev-page .h-opt-s{font-size:13px;fill:#55675F}
.dev-page .h-mid{text-anchor:middle}
.dev-page .h-end{text-anchor:end}
.dev-page .z-p.h-brand1{font-size:13px}
.dev-page .z-p.h-brand2{font-size:7.5px;letter-spacing:.26em}
.dev-page .z-p.h-crumb{font-size:12px}
.dev-page .z-p.h-title{font-size:28px}
.dev-page .z-p.h-small{font-size:15px}
.dev-page .z-p.h-k{font-size:11px}
.dev-page .z-p.h-link{font-size:14px}

/* Mobile brief, journey and proof text follows the shared 8% reading increase. */
@media (max-width:767px){
 .wx-brief dd{font-size:17.28px}
 .wx-flow li>span:last-child{font-size:16.2px}
 .wx-brief dt,.wx-step-a,.wx-tag{font-size:10.8px}
 .feat-title.is-long{line-height:1.04}
 .wx-jr-t{line-height:1.05}
 .wx-tab-t{line-height:1.15}
}