.work-mosaic{height:auto;aspect-ratio:1.42;align-self:center}
.work-mosaic img{object-fit:cover}
.project-choice-grid button:not(.active):hover{background:#202743;border-color:#8d98ec;color:#fff}
.noise,.cursor-glow{display:none}

/* A project is a real, independently scrollable site, not a long page section. */
html:has(.project-viewer),body.project-viewer{height:100%;overflow:hidden;overscroll-behavior:none}
body.project-viewer{margin:0;background:#05060a}
.project-viewer-shell{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.project-viewer-bar{display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto;align-items:center;gap:clamp(12px,2vw,30px);padding:10px clamp(14px,2vw,34px);min-height:70px;background:#090b12;border-bottom:1px solid #313747;z-index:2}
.project-viewer-back{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid #58617c;color:#e8ebff;text-decoration:none;font:600 12px var(--mono);white-space:nowrap;transition:background .2s,border-color .2s}
.project-viewer-back:hover,.project-viewer-back:focus-visible{background:#202743;border-color:#919bff}
.project-viewer-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.project-viewer-title span{color:#939cff;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.project-viewer-title strong{color:#f2f3f9;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-viewer-links{display:flex;gap:15px;white-space:nowrap}
.project-viewer-links a{color:#b9c1ff;text-decoration:none;font:600 11px var(--mono)}
.project-viewer-links a:hover{text-decoration:underline}
.project-viewer .project-live-frame{flex:1;min-height:0;height:auto;border:0;overflow:hidden}
.project-viewer .project-live-frame iframe{height:100%;width:100%;max-width:100%;touch-action:auto}

/* Package guidance reads as one composed heading instead of two disconnected columns. */
.comparison{padding-top:clamp(75px,8vw,135px);padding-bottom:clamp(75px,8vw,135px)}
.comparison-heading{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:16px 7vw;align-items:end;margin-bottom:48px}
.comparison-heading .page-kicker{grid-column:1/-1}
.comparison-heading h2{font-size:clamp(56px,7vw,112px);line-height:.88;letter-spacing:-.075em;margin:0}
.comparison-heading h2 em{font-style:normal;color:#9fa8ff}
.comparison-heading p{font-size:clamp(18px,1.4vw,23px);line-height:1.5;max-width:420px;color:#a9afbd;margin:0 0 6px}

/* The check is a compact, full-width questionnaire. */
.check-tool{display:block;padding-top:clamp(75px,8vw,130px);padding-bottom:clamp(75px,8vw,130px)}
.check-tool-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:10px 6vw;align-items:end;position:static;margin-bottom:42px}
.check-tool-head .page-kicker{grid-column:1/-1}
.check-tool-head h2{font-size:clamp(56px,6.7vw,108px);margin:0}
.check-tool-head p{font-size:clamp(18px,1.4vw,23px);line-height:1.5;max-width:460px;margin:0 0 4px}
.check-questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}
.check-questions article{padding:28px 0 32px;align-content:start}
.check-questions h3{font-size:clamp(22px,1.6vw,29px)}
.check-questions article>div{flex-wrap:wrap}
.check-result{grid-column:auto;margin:36px 0 0}
.check-result.ready{border-color:#8790f8}

@media(max-width:900px){
  .project-viewer-bar{grid-template-columns:auto 1fr auto;gap:10px}
  .project-viewer-title{grid-column:2}
  .project-viewer-links{display:none}
  .comparison-heading,.check-tool-head{grid-template-columns:1fr}
  .comparison-heading .page-kicker,.check-tool-head .page-kicker{grid-column:auto}
  .comparison-heading p,.check-tool-head p{max-width:680px}
}
@media(max-width:720px){
  .project-viewer-bar{grid-template-columns:auto minmax(0,1fr);min-height:58px;padding:7px 10px}
  .project-viewer-back{padding:10px;font-size:11px}
  .project-viewer-back{font-size:10px;padding:9px 8px}
  .project-viewer-back span{display:inline}
  .project-viewer-title{grid-column:2}
  .project-viewer-title span{font-size:8px}
  .project-viewer-title strong{font-size:15px}
  .project-viewer .project-device-tabs{display:none}
  .comparison-heading{margin-bottom:30px}
  .comparison-heading h2,.check-tool-head h2{font-size:clamp(49px,12vw,74px)}
  .comparison-heading p,.check-tool-head p{font-size:18px}
  .check-questions{grid-template-columns:1fr}
  .check-questions article{padding:26px 0}
  .check-questions h3{font-size:23px}
  .check-questions article>div{grid-column:2;flex-direction:row}
  .check-questions button{min-height:44px}
}

/* Editorial hierarchy: kicker first, title left, supporting copy beside it. */
.page-section-head{grid-template-columns:minmax(0,1.42fr) minmax(290px,.58fr);gap:15px clamp(34px,6vw,120px);align-items:end;margin-bottom:64px}
.page-section-head>.page-kicker{grid-column:1/-1;grid-row:1}
.page-section-head>h2{grid-column:1;grid-row:2;margin:0;max-width:1040px;font-size:clamp(54px,5.65vw,90px);line-height:.94}
.page-section-head>p{grid-column:2;grid-row:2;max-width:470px;margin:0 0 4px;font-size:clamp(18px,1.35vw,21px);line-height:1.5}

/* Pull back display type slightly across the site without shrinking body copy. */
.hero h1,.display{font-size:clamp(48px,6.5vw,104px)}
.page-hero h1{font-size:clamp(64px,7.25vw,120px)}
.home-chapter-head h2{font-size:clamp(60px,6.5vw,116px)}
.page-section-head h2,.split-feature h2,.dark-showcase h2,.deliverables h2,.architecture h2,.collaboration h2,.inspo-note h2,.prepare h2{font-size:clamp(54px,5.65vw,92px)}
.works-intro h2,.before-after-copy h2,.direction-intro h2,.design-lab-head h2,.finder-intro h2,.check-tool-head h2,.check-explain>div:first-child h2{font-size:clamp(54px,5.9vw,100px)}
.lab-copy h2,.faq h2,.contact-copy h2{font-size:clamp(48px,5.25vw,90px)}
.page-cta h2{font-size:clamp(58px,7.1vw,115px)}
.footer-v5-intro h2{font-size:clamp(50px,6vw,102px)}
.work-copy h2{font-size:clamp(43px,4vw,68px)}
.work-statement p{font-size:clamp(50px,7vw,122px)}
.home-check-copy h2,.journey-screen-body strong,.preview-copy strong{font-size:clamp(56px,5.2vw,98px)}
.comparison-heading h2{font-size:clamp(54px,6.25vw,98px)}
.company-link h2{font-size:clamp(62px,8vw,132px)}
.concept h2{font-size:clamp(64px,7.2vw,124px)}

@media(max-width:1100px){
  .page-section-head{grid-template-columns:1fr;gap:14px;margin-bottom:48px}
  .page-section-head>.page-kicker,.page-section-head>h2,.page-section-head>p{grid-column:1;grid-row:auto}
  .page-section-head>p{max-width:700px;margin-top:6px}
}
@media(max-width:720px){
  .hero h1{font-size:clamp(55px,17vw,82px)}
  .display{font-size:11.8vw}
  .page-hero h1{font-size:clamp(53px,15vw,78px)}
  .page-section-head h2,.split-feature h2,.dark-showcase h2,.deliverables h2,.architecture h2,.collaboration h2,.inspo-note h2,.prepare h2{font-size:clamp(48px,12.5vw,74px)}
  .home-chapter-head h2{font-size:clamp(50px,11.5vw,73px)}
  .works-intro h2,.before-after-copy h2,.direction-intro h2,.design-lab-head h2,.finder-intro h2,.check-tool-head h2,.check-explain>div:first-child h2{font-size:clamp(47px,12.4vw,75px)}
  .lab-copy h2,.faq h2,.contact-copy h2{font-size:clamp(45px,11.6vw,70px)}
  .page-cta h2{font-size:15vw}
  .footer-v5-intro h2{font-size:clamp(47px,10.7vw,68px)}
  .work-copy h2{font-size:10vw}
  .work-statement p{font-size:13.5vw}
  .home-check-copy h2,.journey-screen-body strong,.preview-copy strong{font-size:clamp(48px,11vw,70px)}
  .comparison-heading h2{font-size:clamp(48px,11vw,70px)}
  .company-link h2{font-size:16vw}
  .concept h2{font-size:17vw}
  .direction-preview h2{font-size:15vw}
}