@font-face{font-family:RelMetropolis;src:url('metropolis-regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:RelMetropolis;src:url('metropolis-semibold.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:RelMetropolis;src:url('metropolis-bold.woff2') format('woff2');font-weight:700;font-display:swap}
.rl-page{--rl-teal:#48a398;--rl-ink:#242424;--rl-purple:#5136ec;color:var(--rl-ink);font-family:RelMetropolis,Arial,sans-serif;background:white;margin:0}.rl-page *{box-sizing:border-box}.rl-page .rl-main{overflow:hidden}.rl-page .rl-container{width:min(790px,calc(100% - 48px));margin-inline:auto}.rl-page .rl-wide{width:min(1420px,calc(100% - 64px));margin-inline:auto}.rl-page p,.rl-page li{font-size:13px;line-height:1.7}.rl-page p{margin:0}.rl-page h1,.rl-page h2,.rl-page h3{font-family:RelMetropolis,Arial,sans-serif}.rl-page h2{color:var(--rl-teal);font-size:31px;line-height:1.3;margin:21px 0 28px;font-weight:700}.rl-page .rl-kicker{font-size:14px;letter-spacing:.18em;font-weight:400;margin-bottom:20px}.rl-page .rl-section{padding-top:112px}.rl-page .rl-intro{padding-top:84px}.rl-intro-top{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start;margin-bottom:52px}.rl-intro h1{font-size:52px;color:var(--rl-teal);margin:0 0 12px;line-height:1.1}.rl-category{font-size:23px!important;letter-spacing:.22em}.rl-meta{padding-top:16px;letter-spacing:.1em}.rl-meta p{font-size:12px;line-height:1.7}.rl-hero{display:block;width:100%;height:auto}.rl-survey{padding-top:105px!important}.rl-survey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center;margin-top:80px}.rl-survey-grid img{width:115px;height:115px;object-fit:contain;display:block;margin:0 auto 18px}.rl-survey-grid strong{display:block;color:var(--rl-teal);font-size:60px;line-height:1.13;font-weight:700}.rl-survey-grid p{margin-top:18px;font-size:12px;line-height:1.5}.rl-hypothesis{padding-top:135px!important}.rl-onboarding{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:70px auto 0}.rl-onboarding img{width:100%;display:block}.rl-personas{padding-top:135px}.rl-persona-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(90px,15vw,280px);margin-top:75px}.rl-persona{text-align:center;max-width:440px;margin-inline:auto}.rl-avatar{width:130px;height:130px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 25px}.rl-persona .rl-quote{font-size:17px;font-style:italic;color:#7ebbb0;line-height:1.5;min-height:56px}.rl-persona h2{font-size:32px;margin:16px 0}.rl-persona>p:not(.rl-quote){min-height:110px}.rl-persona-detail{display:grid;grid-template-columns:100px 1fr;text-align:left;gap:15px;margin-top:38px}.rl-persona-detail h3{font-size:23px;color:var(--rl-teal);margin:0;line-height:1.3}.rl-persona-detail ul{padding-left:17px;margin:0}.rl-flow{padding-top:120px!important}.rl-flow-chart{display:block;width:100%;max-height:540px;object-fit:contain;margin:0 auto 64px}.rl-style{padding-top:130px}.rl-style-head{display:grid;grid-template-columns:33% 1fr;gap:10%;align-items:start}.rl-style-head h2{margin:0}.rl-style-rule{height:1px;background:#8dbbb2;margin:60px -120px 54px}.rl-tile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 35px}.rl-tile-item{min-width:0}.rl-tile-label{font-size:12px;color:#79ada4;margin:0 0 20px;border-bottom:1px solid #7eb8ad;padding-bottom:11px;position:relative}.rl-tile-label:after{content:'';position:absolute;bottom:-3px;right:0;width:6px;height:6px;border-radius:50%;background:#4da69a}.rl-tile-item img{width:100%;height:auto;object-fit:contain;display:block}.rl-tile-item:nth-child(2) img{margin-top:8px}.rl-tile-item:nth-child(4) img{margin-top:20px}.rl-pattern-label{margin-top:62px}.rl-wireframes{padding-top:110px!important}.rl-wireframes p,.rl-hifi p{margin-top:38px}.rl-midfi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:65px auto 0;max-width:620px}.rl-midfi img{width:100%;aspect-ratio:375/667;object-fit:contain;filter:grayscale(1) contrast(.7);opacity:.76}.rl-hifi{padding-top:120px!important}.rl-hifi-grid{display:flex;justify-content:center;margin:60px auto 0}.rl-hifi-grid img{width:min(600px,100%);height:auto}.rl-next{padding-top:130px!important}.rl-next ul{padding-left:22px;margin:42px 0 70px}.rl-next li{margin:4px 0}.rl-finale{display:block;width:90%;margin:0 auto}.rl-project-nav{display:flex;justify-content:space-between;gap:25px;padding:74px 0 68px;color:var(--rl-purple);font-size:clamp(16px,1.15vw,19px);font-weight:700;letter-spacing:.02em}.rl-project-nav span{display:inline-flex;min-height:44px;align-items:center}.rl-zoom{cursor:zoom-in}.rl-zoom:hover{filter:brightness(.98)}
/* Works with the existing shared portfolio header but includes a self-contained fallback */
.rl-page .site-header{background:white;position:relative;z-index:20;box-shadow:0 4px 13px #0000000b}.rl-page .site-header .nav-wrap{max-width:830px;margin:auto;min-height:108px;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:20px}.rl-page .site-header .brand img{width:64px;height:auto;display:block}.rl-page .site-header .site-nav{display:flex;gap:37px;align-items:center;position:static;background:none;box-shadow:none}.rl-page .site-header .site-nav a{font-size:12px;letter-spacing:.18em;text-decoration:none;color:#282832}.rl-page .site-header .menu{display:none;border:0;background:transparent;font-size:25px;color:#5633ee;cursor:pointer}
.rl-footer{border-top:1px solid #f3f3f3}.rl-contact{min-height:255px;display:flex;align-items:center;justify-content:center;gap:45px;padding:38px 22px}.rl-contact img{width:90px}.rl-contact h2{font-size:32px;color:#272727;margin:0 0 17px}.rl-contact a,.rl-footer-links a{color:#262626;text-decoration:none;font-size:14px}.rl-contact a:hover,.rl-footer-links a:hover{text-decoration:underline}.rl-footer-bottom{border-top:1px solid #eee;padding:50px 24px;max-width:900px;margin:auto;display:flex;justify-content:space-between;gap:40px}.rl-footer-bottom>div:first-child{display:flex;flex-direction:column;gap:30px}.rl-footer-bottom img{width:90px}.rl-footer-bottom small{font-size:11px}.rl-footer-links{display:grid;grid-template-columns:repeat(2,130px);gap:30px}
.rl-lightbox[hidden]{display:none!important}.rl-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;padding:55px 75px}.rl-lightbox img{display:block;width:auto;height:auto;max-height:calc(100vh - 100px);max-width:calc(100vw - 185px);object-fit:contain}.rl-lightbox button{position:absolute;color:white;background:transparent;border:0;font-size:40px;cursor:pointer}.rl-close{top:13px;right:25px}.rl-prev{left:17px;top:46%}.rl-next-image{right:17px;top:46%}
@media(max-width:900px){.rl-page .rl-container{width:min(790px,calc(100% - 48px))}.rl-page .rl-section{padding-top:85px}.rl-persona-grid{gap:50px}.rl-page .rl-wide{width:calc(100% - 50px)}.rl-style-rule{margin-left:0;margin-right:0}}
@media(max-width:700px){.rl-page .site-header .nav-wrap{min-height:85px}.rl-page .site-header .menu{display:block}.rl-page .site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 8px 20px #0001;padding:24px;flex-direction:column;gap:25px}.rl-page .site-header .site-nav.is-open{display:flex}.rl-page .rl-container,.rl-page .rl-wide{width:calc(100% - 38px)}.rl-page h2{font-size:25px}.rl-page .rl-kicker{font-size:11px}.rl-page p,.rl-page li{font-size:13px}.rl-intro{padding-top:48px!important}.rl-intro-top{grid-template-columns:1fr;gap:8px;margin-bottom:30px}.rl-intro h1{font-size:43px}.rl-category{font-size:17px!important}.rl-meta{padding-top:10px}.rl-page .rl-section{padding-top:70px!important}.rl-survey-grid{gap:12px;margin-top:45px}.rl-survey-grid img{width:72px;height:72px}.rl-survey-grid strong{font-size:34px}.rl-survey-grid p{font-size:10px}.rl-onboarding{gap:10px;margin-top:45px}.rl-personas{padding-top:80px}.rl-persona-grid{grid-template-columns:1fr;gap:75px;margin-top:45px}.rl-persona>p:not(.rl-quote){min-height:0}.rl-persona-detail{margin-top:28px}.rl-flow-chart{max-height:300px;margin-bottom:35px}.rl-style{padding-top:80px}.rl-style-head{grid-template-columns:1fr;gap:20px}.rl-style-rule{margin:35px 0}.rl-tile{gap:28px 13px}.rl-tile-label{font-size:10px}.rl-pattern-label{margin-top:24px}.rl-midfi{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:35px}.rl-hifi-grid{margin-top:30px}.rl-next ul{margin:25px 0 35px}.rl-project-nav{padding:45px 0;font-size:15px}.rl-contact{min-height:210px;gap:18px}.rl-contact img{width:65px}.rl-contact h2{font-size:23px}.rl-footer-bottom{padding:35px 20px}.rl-footer-links{grid-template-columns:repeat(2,80px);gap:18px}.rl-footer-links a{font-size:12px}.rl-lightbox{padding:50px 28px}.rl-lightbox img{max-width:calc(100vw - 65px);max-height:calc(100vh - 110px)}.rl-lightbox .rl-prev{left:0}.rl-lightbox .rl-next-image{right:0}}


/* ReLife v2: larger, readable case-study layout without altering artwork or image order */
@media (min-width: 901px) {
  .rl-page .rl-container {
    width: min(1080px, calc(100% - 92px));
  }
  .rl-page .rl-wide {
    width: min(1500px, calc(100% - 92px));
  }
  .rl-page p, .rl-page li {
    font-size: 16px;
    line-height: 1.78;
  }
  .rl-page h2 {
    font-size: clamp(34px, 2.45vw, 43px);
    line-height: 1.25;
    margin-bottom: 32px;
  }
  .rl-page .rl-kicker {font-size: 15px;}
  .rl-page .rl-section {padding-top: 132px;}
  .rl-page .rl-intro {padding-top: 98px;}
  .rl-intro h1 {font-size: clamp(65px, 5vw, 86px);}
  .rl-category {font-size: 29px !important;}
  .rl-meta p {font-size: 15px;}
  .rl-intro-top {gap: 40px; margin-bottom: 62px;}
  .rl-survey-grid {gap: 45px; margin-top: 85px;}
  .rl-survey-grid img {width: 145px; height: 145px;}
  .rl-survey-grid strong {font-size: 76px;}
  .rl-survey-grid p {font-size: 15px;}
  .rl-onboarding {gap: 35px;}
  .rl-persona-grid {gap: clamp(90px, 11vw, 210px);}
  .rl-persona .rl-quote {font-size: 19px;}
  .rl-persona h2 {font-size: 38px;}
  .rl-persona-detail {grid-template-columns: 120px 1fr;}
  .rl-persona-detail h3 {font-size: 26px;}
  .rl-flow-chart {max-height: none; margin-bottom: 80px;}
  .rl-style-head {gap: 8%;}
  .rl-style-rule {margin-left: 0; margin-right: 0;}
  .rl-tile {gap: 48px 45px;}
  .rl-tile-label {font-size: 15px;}
  .rl-wireframes p, .rl-hifi p {margin-top: 35px;}
  .rl-midfi {
    max-width: 1010px;
    width: 100%;
    gap: 22px;
    margin-top: 75px;
  }
  .rl-hifi-grid img {width: min(880px, 100%);}
  .rl-finale {width: 95%;}
}
@media (min-width: 701px) and (max-width: 900px) {
  .rl-page .rl-container {width: calc(100% - 68px);}
  .rl-page p, .rl-page li {font-size: 15px; line-height: 1.75;}
  .rl-page h2 {font-size: 35px;}
  .rl-midfi {width: 100%; max-width: none; gap: 14px;}
  .rl-hifi-grid img {width: min(750px,100%);}
}
@media (max-width: 700px) {
  .rl-midfi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 480px;
    gap: 16px;
  }
  .rl-midfi img {width:100%;}
}
/* Keep original mid-fi art fully legible; no grayscale, dimming or hover washout. */
.rl-page .rl-midfi img,
.rl-page .rl-midfi img:hover,
.rl-page .rl-midfi img:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}

/* ReLife v3 — match the shared Works page header across viewport sizes. */
.rl-page .site-header{height:154px;position:sticky;top:0;z-index:1000}
.rl-page .site-header .nav-wrap{width:min(1120px,calc(100% - 160px));max-width:none;height:100%;min-height:0;padding:0;margin-inline:auto}
.rl-page .site-header .brand img{width:100px;height:auto}
.rl-page .site-header .site-nav{display:flex;gap:52px;align-items:center;position:static;box-shadow:none;padding:0}
.rl-page .site-header .site-nav a{font-size:15px;letter-spacing:2px;line-height:1.65;font-weight:400;padding:10px 2px 8px;color:#171717;border-bottom:2px solid transparent}
.rl-page .site-header .site-nav a:hover,.rl-page .site-header .site-nav a:focus-visible{color:#4b2cff;border-bottom-color:#4b2cff}
@media(max-width:1050px){
 .rl-page .site-header{height:140px}
 .rl-page .site-header .nav-wrap{width:min(920px,calc(100% - 48px));max-width:none;min-height:0;padding:0}
 .rl-page .site-header .site-nav{gap:36px}
 .rl-page .site-header .site-nav a{font-size:14px}
}
@media(max-width:720px){
 .rl-page .site-header{height:78px}
 .rl-page .site-header .nav-wrap{width:calc(100% - 30px);min-height:0;padding:0}
 .rl-page .site-header .brand img{width:82px}
 .rl-page .site-header .menu{display:block}
 .rl-page .site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 8px 20px #0002;padding:12px 24px 20px;flex-direction:column;align-items:flex-start;gap:0}
 .rl-page .site-header .site-nav.open,.rl-page .site-header .site-nav.is-open{display:flex}
 .rl-page .site-header .site-nav a{width:100%;font-size:15px;letter-spacing:1.8px;padding:12px 0}
}


/* ReLife v4 — use the same header drop shadow as the shared Works header. */
.rl-page .site-header {
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12) !important;
}

/* ReLife v6: same from-above fade/drop motion as the home/Works scroll reveal.
   Only JS-selected, offscreen items are hidden; without JS, everything is visible. */
.rl-page .rl-motion-item { opacity: 1; transform: none; }
.rl-page .rl-motion-item.rl-motion-pending {
  opacity: 0; transform: translate3d(0,-64px,0);
}
.rl-page .rl-motion-item.rl-motion-active {
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rl-motion-delay, 0ms);
}
.rl-page .rl-motion-item.rl-motion-shown { opacity:1;transform:translate3d(0,0,0); }
@media(max-width:720px){
  .rl-page .rl-motion-item.rl-motion-pending{transform:translate3d(0,-52px,0)}
}
@media(prefers-reduced-motion:reduce){
  .rl-page .rl-motion-item.rl-motion-pending,
  .rl-page .rl-motion-item.rl-motion-shown{opacity:1!important;transform:none!important;transition:none!important}
}


/* v7 — opening elements animate on first page load even without scrolling.
   Existing scroll reveals and interaction styles remain unchanged. */
@keyframes rl-opening-arrive {
  from { opacity: 0; transform: translate3d(0, -42px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .rl-page.rl-intro-enter .rl-intro-top > div:first-child {
    animation: rl-opening-arrive 850ms cubic-bezier(.16,1,.3,1) both;
  }
  .rl-page.rl-intro-enter .rl-intro-top > div:last-child {
    animation: rl-opening-arrive 850ms cubic-bezier(.16,1,.3,1) 140ms both;
  }
  .rl-page.rl-intro-enter .rl-intro > .rl-hero {
    animation: rl-opening-arrive 1050ms cubic-bezier(.16,1,.3,1) 270ms both;
  }
}

/* ReLife v8: Mid-Fi images animate when entering view.
   Overrides only the old always-visible hover-protection rule. */
@media (prefers-reduced-motion: no-preference) {
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-pending,
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-pending:hover,
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-pending:focus-visible {
    opacity: 0 !important;
    transform: translate3d(0,-64px,0) !important;
  }
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-shown,
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-shown:hover,
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-shown:focus-visible {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width:720px) {
  .rl-page .rl-midfi img.rl-motion-item.rl-motion-pending {transform:translate3d(0,-52px,0) !important;}
}