:root{--ink:#1c1c1c;--muted:#5d6063;--line:#e9e9e9;--orange:#f56d26;--serif:'Instrument Serif',Georgia,serif;--sans:Geist,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans)}a{color:inherit;text-decoration:none}img{max-width:100%}a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100px;left:20px;background:#fff;padding:12px;z-index:20}.skip-link:focus{top:12px}.cover{max-width:1720px;margin:auto;background:#eef3f8;position:sticky;top:0;z-index:0}.cover img{display:block;width:100%;height:auto}.layout{max-width:1720px;margin:auto;display:grid;grid-template-columns:260px minmax(0,1fr);position:relative;z-index:1;background:#fff;box-shadow:0 -16px 40px rgba(0,0,0,.08)}.sidebar{border-right:1px solid var(--line);height:100vh;position:sticky;top:0;padding:70px 34px 28px 44px;align-self:start;overflow:auto;background:#fff;z-index:5}.mark{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#3154d4;color:#fff;font-size:14px;font-weight:700}.back{display:block;margin:34px 0 23px;font-size:14px;color:#555}.back:hover,.sidebar nav a:hover,.sidebar nav a.active{color:var(--orange)}.sidebar nav{display:flex;flex-direction:column;gap:1px}.sidebar nav a{display:block;padding:8px 0;color:#666;font-size:14px;line-height:1.35}.sidebar nav a.active{font-weight:600}main{min-width:0}.section{padding:100px clamp(36px,7.5vw,128px);border-bottom:1px solid var(--line);scroll-margin-top:20px}.inner{max-width:1184px;margin:0 auto}.eyebrow{font:600 13px/1.45 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0 0 18px;color:#34383c}.section h2,.other-projects h2{font:400 clamp(38px,3.1vw,52px)/1.1 var(--serif);letter-spacing:-2px;margin:0 0 26px;max-width:1000px}.overview h2{font-size:clamp(42px,3.1vw,52px);max-width:1000px}.section h2 em{color:var(--orange);font-weight:400}.copy{max-width:900px;color:var(--muted);font-size:17px;line-height:1.58}.copy p{margin:0 0 22px}.copy p:last-child{margin-bottom:0}.section> .inner > p.copy{margin:0 0 42px}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:start;gap:20px;margin:64px 0 0}.facts>div{display:flex;flex-direction:column;gap:10px}.facts small{font-size:12px;letter-spacing:.07em;text-transform:uppercase}.facts span{font-size:15px}.live-link{background:#ff781f;color:#fff;border-radius:4px;padding:13px 17px;white-space:nowrap;font-size:14px;font-weight:600}.live-link:hover{background:#db5f17}.impact{background:#ffe0cb;margin-top:70px;padding:34px 42px}.impact .eyebrow{display:block;margin:0 0 16px}.impact p{font:400 clamp(30px,3.1vw,52px)/1.1 var(--serif);letter-spacing:-2px;max-width:920px;margin:0}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 24px;background:#f4f4f4;padding:32px;margin-top:58px}.metrics>div{display:flex;flex-direction:column;gap:15px}.metrics small{font-size:13px;line-height:1.4}.metrics strong{font-size:clamp(29px,2.8vw,42px);font-weight:500;letter-spacing:-.05em;color:var(--orange)}.metrics em{font-size:14px;font-style:normal;font-weight:400;letter-spacing:0}.footnote{font-size:13px;color:#787878;margin:24px 0 0}.before-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:54px}.before-after a,.visual-link,.pdp-panels a,.wireframe-pair a{display:block}.before-after img,.pdp-panels img,.wireframe-pair img{display:block;width:100%;height:auto}.full-visual{display:block;width:100%;height:auto;margin-top:40px}.visual-link .full-visual{margin:0}.visual-link{margin-top:40px}.on-gray{background:#f3f3f3}.tools-note{font-size:14px;margin:24px 0 42px;color:#6b6b6b}.list-title{font-size:23px;font-weight:500;margin:46px 0 26px}.findings{border-top:1px solid var(--line)}.findings>div{display:grid;grid-template-columns:55px 1fr;gap:20px;border-bottom:1px solid var(--line);padding:24px 8px}.findings b{font-size:15px;color:#333}.findings h4{font-size:18px;font-weight:600;margin:0 0 7px}.findings p{font-size:15px;line-height:1.5;color:var(--muted);margin:0}.competitor-names{display:flex;justify-content:space-around;align-items:center;gap:20px;margin:56px 0 40px;font-size:22px;font-weight:600}.competitor-names span:nth-child(1){color:#ed4e45;font-size:17px}.competitor-names span:nth-child(3){color:#17b1ad;font-size:14px;letter-spacing:.1em}.competitor-names span:nth-child(4){color:#969696;font-weight:400}.constraints-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px;margin-top:66px}.constraints-grid>div{border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:38px 1fr;column-gap:12px}.constraints-grid b{font-size:14px}.constraints-grid h4{font-size:17px;margin:0 0 10px}.constraints-grid p{grid-column:2;font-size:15px;color:var(--muted);line-height:1.5;margin:0}blockquote{border-left:3px solid var(--orange);padding-left:24px;font:400 clamp(24px,2.2vw,33px)/1.1 var(--serif);letter-spacing:-2px;margin:48px 0 22px;max-width:900px}.subhead{font-size:clamp(23px,2vw,32px);font-weight:500;letter-spacing:-.03em;margin:80px 0 26px}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:#4a4a4a}.pdp-panels{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain}.pdp-panels::-webkit-scrollbar{display:none}.pdp-panels>a{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}.pdp-carousel{margin-top:28px}.carousel-bar{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:16px}.carousel-count{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.carousel-hint{font-size:13px;color:var(--muted)}.carousel-actions{display:flex;align-items:center;gap:8px}.carousel-actions button{font:500 14px var(--sans);border:1px solid #c9c9c9;background:#fff;color:var(--ink);border-radius:100px;min-width:40px;height:40px;padding:0 12px;cursor:pointer}.carousel-actions button:hover,.carousel-dots button:hover{border-color:var(--orange);color:var(--orange)}.carousel-actions .carousel-toggle{min-width:78px}.carousel-dots{display:flex;justify-content:center;gap:10px;padding:18px 0}.carousel-dots button{border:1px solid #aaa;background:#fff;border-radius:50%;width:10px;height:10px;padding:0;cursor:pointer}.carousel-dots button[aria-current=true]{background:var(--orange);border-color:var(--orange)}.pdp-panels a,.wireframe-pair a{background:#f4f4f4}.wireframe-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:46px}.wireframe-pair a:first-child{max-height:850px;overflow:hidden}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:55px}.system-card{border:1px solid #e6e7e8;border-radius:14px;padding:30px;background:#f7f7f7;min-height:235px}.system-card h3{color:#ee6c28;font-size:22px;font-weight:500;margin:0 0 9px}.system-card p{font-size:15px;line-height:1.45;margin:0;color:#383838}.system-card.span-two{grid-column:1/-1}.type-sample{font-size:75px;font-weight:700;letter-spacing:-.09em;margin-top:20px}.type-sample span{font-size:34px;font-weight:400;letter-spacing:0;margin-left:10px}.weight-sample{display:flex;justify-content:space-between;gap:5px;margin:38px 0 18px;font-size:14px}.alphabet{word-break:break-word}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:30px}.swatches>div{border-radius:7px;min-height:85px;padding:14px;font-size:13px}.button-samples{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.button-samples span{border:1px solid #f07837;background:#ff791f;color:#fff;border-radius:99px;padding:10px 18px;font-size:13px}.button-samples span:nth-child(2){background:#fff;color:#f07837}.button-samples span:nth-child(3){background:#ffe3d4;color:#e56626}.button-samples span:nth-child(4){background:#ddd;color:#999;border-color:#ddd}.results-visuals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;align-items:start}.results-visuals img{width:100%;max-height:440px;object-fit:cover;object-position:top;background:#f4f4f4;border-radius:12px}.results-list{margin-top:48px}.results-list>div{display:grid;grid-template-columns:1fr 1fr;gap:35px;min-height:150px;padding:30px 42px;align-items:center}.results-list>div:nth-child(1){background:#fff0f8}.results-list>div:nth-child(2){background:#fcf6e9}.results-list>div:nth-child(3){background:#f0f0ff}.results-list strong{font-size:46px;letter-spacing:-.05em;font-weight:600}.results-list p{font-size:16px;line-height:1.55;margin:0}.other-projects{background:#fafaf8;padding:85px clamp(36px,7.5vw,128px)}.project-links{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:35px}.project-links a{display:flex;flex-direction:column;gap:10px}.project-links img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:10px}.project-links span{font-size:12px;text-transform:uppercase;letter-spacing:.07em}.project-links strong{font:400 25px/1.1 var(--serif)}.project-links a:hover strong{text-decoration:underline}
@media(max-width:1150px){.layout{grid-template-columns:215px minmax(0,1fr)}.sidebar{padding:45px 20px}.section{padding:78px 48px}.facts{grid-template-columns:repeat(2,1fr)}.live-link{justify-self:start}.metrics{gap:24px}.pdp-section .full-visual{width:100%}}
@media(max-width:800px){.layout{display:block}.sidebar{height:auto;position:sticky;top:0;display:flex;align-items:center;gap:16px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:10px 18px;box-shadow:0 2px 8px #0000000b}.mark{width:35px;height:35px;flex:none}.back{margin:0;flex:none}.sidebar nav{flex-direction:row;gap:18px}.sidebar nav a{flex:none;padding:8px 0}.section{scroll-margin-top:66px}}
@media(max-width:600px){.section{padding:68px 22px}.section h2,.overview h2{font-size:40px}.copy{font-size:16px}.facts{margin-top:40px;gap:23px}.facts span{font-size:14px}.impact{margin-top:44px;padding:26px}.impact p{font-size:31px}.metrics{grid-template-columns:1fr 1fr;padding:20px;gap:22px}.metrics strong{font-size:29px}.metrics small{font-size:11px}.before-after{gap:10px}.competitor-names{font-size:15px;flex-wrap:wrap}.constraints-grid,.system-grid,.wireframe-pair,.results-visuals{grid-template-columns:1fr}.carousel-bar{flex-wrap:wrap;gap:10px}.carousel-hint{order:3;flex-basis:100%}.system-card.span-two{grid-column:auto}.info-grid{grid-template-columns:1fr 1fr}.swatches{grid-template-columns:1fr 1fr}.results-list>div{grid-template-columns:1fr;gap:9px;padding:25px}.results-list strong{font-size:38px}.results-list p{font-size:15px}.other-projects{padding:65px 22px}.project-links{gap:12px}.project-links strong{font-size:21px}.subhead{margin-top:58px}.wireframe-pair a:first-child{max-height:600px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep an entire PDP comparison board visible in a desktop viewport. */
/* Preserve each complete comparison board at a readable middle size. */
.pdp-carousel .pdp-panels>.pdp-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;background:#f4f4f4;padding:12px 18px 22px}
.pdp-carousel .pdp-slide>a{display:block;width:min(100%,680px)}
.pdp-carousel .board-window{display:block;width:100%;overflow:visible}
.pdp-carousel .board-window img{display:block;width:100%;height:auto;max-width:none;transform:none}

@media(max-width:800px){.pdp-carousel .pdp-panels>.pdp-slide{padding:8px}}

/* Quiet, paced motion that follows the reading flow. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-ready .section h2.reveal{transition-delay:90ms}
.motion-ready .section .copy.reveal,.motion-ready .section .facts.reveal,.motion-ready .section .metrics.reveal{transition-delay:160ms}
.live-link,.carousel-actions button,.project-links img{transition:transform .35s ease,background-color .35s ease,box-shadow .35s ease}
.live-link:hover,.carousel-actions button:hover{transform:translateY(-2px)}
.project-links a:hover img{transform:translateY(-4px);box-shadow:0 12px 28px #00000014}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;transition:none}.live-link,.carousel-actions button,.project-links img{transition:none}}

/* PayRentz-specific refinements. */
.payrentz-page:not(.novvel-page) .impact p{letter-spacing:0}
.payrentz-page:not(.novvel-page) .results-list{display:flex;flex-direction:column;gap:24px}
.payrentz-page:not(.novvel-page) .sidebar .mark{background:transparent}
.payrentz-page:not(.novvel-page) .sidebar .mark img{display:block;width:100%;height:100%}
@media(max-width:600px){.payrentz-page:not(.novvel-page) .results-list{gap:20px}}

/* Comfortable case-study headings on narrow screens, shared by Novvel. */
@media(max-width:600px){.payrentz-page .section h2,.payrentz-page .overview h2{font-size:clamp(30px,7.7vw,34px);line-height:1.18;letter-spacing:-.025em}}

/* Slightly quieter desktop section headings on both case studies. */
@media(min-width:801px){.payrentz-page .section h2{font-size:clamp(36px,2.9vw,48px)}.payrentz-page .overview h2{font-size:clamp(39px,2.9vw,48px)}}