/* The showcase shares Hyperise's existing palette, typography and spacing. */
.selected-work{padding-top:64px;padding-bottom:32px}
.work-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:38px}
.work-heading h2{font-size:clamp(36px,3.6vw,52px)}
.work-heading>p{font-size:12px;color:var(--muted)}
.work-slides:not(.is-ready)>.work-feature{margin-top:0}
.work-slides.is-ready{display:grid}
.work-slides.is-ready>.work-feature{grid-area:1/1;margin-top:0;min-width:0}
.work-slides.is-ready>.work-feature:not(.is-active){visibility:hidden;pointer-events:none}
.selected-work.has-project-controls .work-intro{display:none}
.work-carousel{position:relative}
.work-switcher{position:absolute;inset:0 clamp(-54px,-4.5vw,-18px);z-index:3;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.work-arrow{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:10px;background:transparent;border:0;border-radius:10px;color:var(--text);opacity:.4;cursor:pointer;pointer-events:auto;transition:opacity .18s}
.work-arrow:before{content:"";position:absolute;inset:4px;background:color-mix(in srgb,var(--accent) 5%,transparent);border:1px solid color-mix(in srgb,var(--accent) 8%,transparent);border-radius:8px;opacity:0;transition:opacity .18s}
.work-arrow svg{position:relative;width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.work-arrow:hover,.work-arrow:focus-visible{opacity:1}
.work-arrow:hover:before,.work-arrow:focus-visible:before{opacity:1}
.work-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:none){.work-arrow{opacity:.65}.work-arrow:focus-visible,.work-arrow:active{opacity:1}}
@media(prefers-contrast:more){.work-arrow{opacity:1}}
.work-heading>.work-position{margin:0;min-width:48px;flex-shrink:0;text-align:right;font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted)}
.work-reader-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.has-project-controls .work-heading{align-items:center}
.work-feature{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:5%;align-items:center;background:var(--work-bg);color:var(--text);border-radius:4px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 4%,transparent);padding:clamp(26px,3.5vw,50px)}
.work-visual{display:block;position:relative;min-width:0;aspect-ratio:1.55;isolation:isolate}
.work-visual:before{content:"";position:absolute;inset:8% 2% 4% 5%;background:transparent;border-radius:4px;z-index:-1}
.work-desktop{display:block;width:92%;position:absolute;top:0;left:0;border:5px solid var(--line);border-radius:5px;overflow:hidden;box-shadow:0 12px 28px #00000030}
.work-booking{display:block;position:absolute;bottom:0;right:0;width:53%;padding:5px;background:var(--panel);border-radius:5px;box-shadow:0 14px 35px #00000060}
.work-annotation{position:absolute;z-index:2;display:flex;pointer-events:none;color:var(--muted);font-family:"Segoe Print","Bradley Hand",cursive;font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0}
.work-annotation svg{display:block;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8;flex-shrink:0}
.work-annotation-front{left:13%;top:-31px;align-items:flex-start;gap:8px;transform:rotate(-5deg)}
.work-annotation-front svg{width:42px;height:36px}
.work-annotation-booking{left:2%;bottom:2%;width:43%;align-items:flex-end;gap:7px}
.work-annotation-booking>span{white-space:nowrap;transform:rotate(-5deg);padding-bottom:1px}
.work-annotation-booking svg{width:0;min-width:30px;height:44px;flex:1}
.work-visual img,.project-screen img{display:block;width:100%;height:auto}
.work-visual:focus-visible,.work-project-link:focus-visible{outline-color:var(--accent)}
.work-copy{min-width:0}
.work-label{color:var(--accent);font-size:11px;line-height:1.6;letter-spacing:.07em;text-transform:uppercase}
.work-copy .work-label{color:var(--muted)}
.work-copy h3{font-size:clamp(30px,3.2vw,44px);font-weight:400;letter-spacing:-.05em;line-height:1.08;margin:17px 0}
.work-copy>p:not(.work-label):not(.work-note){color:var(--muted);font-size:15px;line-height:1.7;max-width:320px}
.work-features{list-style:none;padding:0;margin:24px 0 21px;font-size:12px;color:var(--muted);display:grid;gap:10px}
.work-features li{padding-left:14px;position:relative}
.work-features li:before{content:"";position:absolute;left:0;top:.45em;width:4px;height:4px;border-radius:50%;background:var(--line)}
.work-project-link{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:44px;font-size:14px;border-bottom:1px solid var(--line)}
.work-project-link:hover{color:var(--accent);border-color:currentColor}
.work-project-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.work-note a{text-decoration:underline;text-underline-offset:3px}
.project-credits{margin-top:20px;max-width:820px;color:var(--muted);font-size:13px;line-height:1.8}
.project-credits summary{width:fit-content;min-height:44px;cursor:pointer;padding:10px 0}
.project-credits summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.project-credits a{text-decoration:underline;text-underline-offset:3px}
.project-credits ul{padding-left:20px;margin:12px 0}
.work-copy .work-note{color:var(--muted);font-size:11px;line-height:1.6;margin-top:16px}
/* The other projects: a numbered list under the lead project. Each whole row opens its case study. */
.work-list{list-style:none;margin:28px 0 0;padding:0}
.work-list li{border-top:1px solid var(--line)}
.work-list li:last-child{border-bottom:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:40px 176px minmax(0,1fr) 190px 24px;column-gap:24px;align-items:center;padding:18px 0}
.work-row-number{font-size:13px;letter-spacing:.06em;color:var(--accent)}
.work-row-image{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.work-row-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.work-row h3{font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:1.25}
.work-row-text p{margin-top:4px;font-size:15px;line-height:1.6;color:var(--muted)}
.work-row .work-label{color:var(--muted)}
.work-row-arrow{width:24px;height:24px;color:var(--muted)}
.work-row-logo{background:#fff}
.work-row-logo img{padding:6px;object-fit:contain;object-position:center}
.work-more summary{cursor:pointer;list-style:none}
.work-more summary::-webkit-details-marker{display:none}
.work-more[open] summary .work-row-arrow{transform:rotate(90deg)}
.work-more-copy{padding:0 48px 22px 264px}
.work-more-copy p{max-width:560px;font-size:15px;line-height:1.6;color:var(--muted)}
.work-more-copy a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
/* Pricing stages: a ladder read top to bottom, not options to pick from. The open stage is in mint. */
.pricing-stages{list-style:none;margin:0;padding:0 0 0 34px}
.pricing-stage{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"when title price" "when copy price" "when action price";column-gap:32px;padding:32px 0;border-top:1px solid var(--line)}
.pricing-stage:before{content:"";position:absolute;z-index:1;top:44px;left:-34px;width:11px;height:11px;border:1px solid var(--muted);border-radius:50%;background:var(--bg)}
.pricing-stage:not(:last-child):after{content:"";position:absolute;top:44px;bottom:-46px;left:-28px;width:1px;background:var(--line);transform-origin:top}
.pricing-stage[aria-current]:before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.pricing-stage[aria-current]:after{background:linear-gradient(var(--accent),var(--line))}
.stage-when{grid-area:when;font-size:12px;letter-spacing:.08em;line-height:36px;text-transform:uppercase;color:var(--muted)}
.pricing-stage[aria-current] .stage-when{color:var(--accent)}
.pricing-stage h3{grid-area:title;font-size:28px;font-weight:650;letter-spacing:-.03em;line-height:36px}
.stage-copy{grid-area:copy;max-width:600px;margin-top:10px;font-size:15px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.stage-copy span{white-space:nowrap}
.stage-price{grid-area:price;font-size:28px;letter-spacing:-.04em;line-height:36px;text-align:right;white-space:nowrap}
.pricing-stage[aria-current] .stage-price{margin-right:-.04em;padding-right:.06em;font-size:clamp(88px,10vw,144px);letter-spacing:-.06em;line-height:1;color:var(--accent)}
.stage-price small{display:block;margin-top:8px;font-size:12px;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.pricing-stage .button{grid-area:action;justify-self:start;margin-top:24px}
.pricing-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px;margin-left:34px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--muted)}
.pricing-bottom a{color:var(--text);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:4px}
.pricing-bottom a:hover{color:var(--accent)}
.project-page .content-main{max-width:1336px;padding-bottom:76px}
.project-heading{max-width:900px;margin-bottom:42px}
.project-heading h1{font-size:clamp(44px,6.4vw,88px);line-height:1.05;margin:22px 0 24px;letter-spacing:-.06em}
.project-heading .lead{font-size:clamp(18px,2vw,23px);line-height:1.6;color:var(--muted);max-width:720px}
.project-facts{display:flex;gap:18px 46px;flex-wrap:wrap;margin:30px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}
.project-facts dt{color:var(--muted);font-size:11px;margin-bottom:4px}
.project-facts dd{margin:0}
.project-screen{margin:0;min-width:0}
.project-screen>a{display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.project-screen>a:hover{border-color:var(--line)}
.project-screen figcaption{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);line-height:1.6;margin-top:14px}
.project-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8%;margin:64px 0;padding-top:40px;border-top:1px solid var(--line)}
.project-story h2,.project-cta h2{font-size:clamp(30px,3.8vw,48px);line-height:1.1;letter-spacing:-.05em}
.project-story p{font-size:16px;color:var(--muted);line-height:1.8;max-width:620px}
.project-story p+p{margin-top:18px}
.project-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.project-detail{min-width:0}
.project-detail h3{font-size:24px;font-weight:400;letter-spacing:-.03em;margin:26px 0 12px}
.project-detail>p{font-size:15px;line-height:1.75;color:var(--muted);max-width:510px}
.project-feature-grid{row-gap:48px}
.project-feature-grid .project-screen>a{aspect-ratio:1265/712;background:var(--panel)}
.project-feature-grid .project-screen img{height:100%;object-fit:contain}
.project-feature-grid .project-screen-mobile>a{display:flex;align-items:center;justify-content:center;padding:18px;background:var(--panel)}
.project-feature-grid .project-screen-mobile img{width:auto;max-width:100%;height:100%;border:1px solid var(--line);border-radius:3px}
.project-feature-tour .project-story{margin-bottom:36px}
.project-demo{margin-top:20px}
.project-boundary{border-top:1px solid var(--line);padding-top:24px;margin-top:38px;color:var(--muted);font-size:13px;line-height:1.8;max-width:820px}
.project-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.project-cta p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:15px;max-width:600px}
.project-cta .button{flex-shrink:0}
@media(max-width:1000px){.work-feature{gap:4%;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.work-copy h3{font-size:34px}.work-visual{aspect-ratio:1.3}.work-desktop{top:8%}.work-booking{bottom:7%;width:64%}}
@media(max-width:760px){.selected-work{padding-top:48px;padding-bottom:16px}.work-heading{margin-bottom:28px}.work-feature{grid-template-columns:minmax(0,1fr);gap:30px;padding:26px}.work-visual{aspect-ratio:1.55}.work-desktop{top:0}.work-booking{bottom:0;width:53%}.work-copy h3{font-size:37px;margin-top:12px}.work-copy h3 br{display:none}.work-copy h3 br:after{content:" "}.work-copy>p:not(.work-label):not(.work-note){max-width:540px}.work-copy .work-note{max-width:none}.project-heading{margin-bottom:30px}.project-heading h1{font-size:clamp(41px,8.5vw,64px)}.project-story{grid-template-columns:minmax(0,1fr);gap:24px;margin:44px 0;padding-top:30px}.project-details{grid-template-columns:minmax(0,1fr);gap:38px}.project-detail h3{margin-top:20px}.project-cta{flex-direction:column;align-items:flex-start;margin-top:44px;padding-top:34px}.project-facts{gap:18px 30px}.project-page .header .nav-work{display:inline-flex}.project-screen figcaption{flex-wrap:wrap;gap:5px 20px}}
@media(max-width:480px){.header .nav-link:not(.nav-work){display:none}.header .nav-work{display:inline-flex}.work-heading{align-items:flex-start}.work-heading>p{padding-top:8px}.work-heading h2{font-size:34px}.project-facts{display:grid;grid-template-columns:1fr 1fr}.project-page .content-main{padding-top:104px}}
@media(max-width:480px){.work-feature{padding:22px}.work-heading{gap:16px}.work-heading h2{font-size:31px}.work-heading>p{max-width:95px;line-height:1.6;padding-top:1px;text-align:right}.work-copy h3{font-size:32px}.work-visual{aspect-ratio:1.4}.work-booking{width:62%}.work-desktop{border-width:3px}.work-booking{padding:3px}}
@media(prefers-contrast:more){.project-heading .lead,.project-story p,.project-detail>p,.project-cta p{color:var(--text)}.work-copy>p,.work-features{color:var(--text)}}
@media(min-width:761px) and (max-width:1000px){.work-annotation{font-size:11px}.work-annotation-front{top:calc(8% - 29px);left:9%}.work-annotation-booking{width:32%;left:1%;bottom:9%;gap:3px}.work-annotation-booking>span{white-space:normal}.work-annotation-booking svg{min-width:25px;height:35px}}
@media(max-width:760px){.work-annotation-front{top:-25px;left:12%;gap:5px}.work-annotation-front svg{width:34px;height:29px}.work-annotation-booking{font-size:11px}}
@media(max-width:480px){.work-annotation{font-size:10px}.work-annotation-front{top:-21px;left:10%;gap:4px}.work-annotation-front svg{width:29px;height:25px}.work-annotation-booking{left:0;bottom:2%;width:36%;gap:3px}.work-annotation-booking>span{white-space:normal}.work-annotation-booking svg{min-width:23px;height:35px}}
@media(prefers-contrast:more){.work-annotation{color:var(--text)}.work-annotation svg{opacity:1}}
@media(max-width:1000px){.work-row{grid-template-columns:32px 148px minmax(0,1fr) 24px;grid-template-areas:"number image label arrow" "number image text arrow";row-gap:4px}.work-row-number{grid-area:number}.work-row-image{grid-area:image}.work-row .work-label{grid-area:label;align-self:end}.work-row-text{grid-area:text;align-self:start}.work-row-arrow{grid-area:arrow}}
@media(max-width:760px){.work-list{margin-top:24px}.work-row{grid-template-columns:100px auto minmax(0,1fr) 20px;grid-template-areas:"image number label arrow" "image text text arrow";column-gap:10px;row-gap:5px;align-items:start;padding:16px 0}.work-row-number{font-size:11px;line-height:1.6}.work-row .work-label{align-self:start}.work-row-arrow{align-self:center;width:20px;height:20px}.work-row h3{font-size:20px}.work-row-text p{margin-top:2px;font-size:13px;line-height:1.5}}
@media(max-width:380px){.work-row{grid-template-columns:68px auto minmax(0,1fr) 18px}.work-row h3{font-size:18px}.work-row .work-label{font-size:10px}}
@media(max-width:1000px){.work-more-copy{padding-left:228px}}
@media(max-width:760px){.work-more-copy{padding:0 30px 10px 110px}.work-more-copy p{font-size:13px;line-height:1.5}.work-row-logo img{padding:4px}}
@media(max-width:380px){.work-more-copy{padding-left:78px}.work-row-logo img{padding:2px}}
@media(max-width:760px){.pricing-stages{padding-left:26px}.pricing-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"when" "title" "price" "copy" "action";padding:26px 0 30px}.pricing-stage:before{top:29px;left:-26px}.pricing-stage:not(:last-child):after{top:29px;bottom:-31px;left:-20px}.stage-when{margin-bottom:10px;line-height:1.5}.pricing-stage h3{font-size:24px;line-height:1.25}.stage-price{margin-top:6px;font-size:24px;line-height:1.25;text-align:left}.pricing-stage[aria-current] .stage-price{margin:12px 0 0 -.07em;font-size:clamp(88px,28vw,120px)}.stage-price small{margin-left:8px}.pricing-bottom{flex-direction:column;margin-left:26px}}