/* Company homepage: restrained typography and a visual application portfolio. */
.home-page { --home-paper:#f6f5f0; }
.home-page .site-header { border-bottom-color:#ffffff24; }
.home-page .hero { min-height:740px; }
.home-page .hero-inner { padding-top:150px; padding-bottom:42px; }
.home-page .hero h1 { margin:30px 0 26px; font-size:clamp(78px,9vw,128px); letter-spacing:-.065em; line-height:.9; font-weight:750; }
.home-page .hero-copy { max-width:435px; color:#d6d6d0; font-size:21px; line-height:1.5; }
.home-page .hero-mark { width:min(59vw,800px); right:-4%; opacity:.8; mix-blend-mode:screen; }
.home-page .hero-facts { margin-top:64px; max-width:680px; gap:20px; }
.home-page .hero-facts dt { font-size:10px; letter-spacing:.08em; }
.home-page .button { border-radius:6px; }
.home-page .section-index { font-size:11px; letter-spacing:.1em; }
.home-page .intro-section { padding-block:110px; }
.home-page .intro-content h2,
.home-page .section-heading h2,
.home-page .identity-copy h2,
.home-page .contact-grid h2 { letter-spacing:-.045em; }
.home-page .lead { font-size:22px; line-height:1.65; max-width:790px; }
.home-page .practice-section { padding-bottom:110px; }
.home-page .practice-item { min-height:270px; }
.home-page .practice-item h3 { margin-top:48px; letter-spacing:-.025em; }
.home-page .identity-mark { border:0; border-radius:18px; }
.home-page .identity-section { padding-block:100px; }
.home-page .apps-section { padding-block:90px; background:var(--home-paper); border-block:1px solid #e2e1d9; scroll-margin-top:24px; }
.portfolio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; }
.portfolio-heading h2 { font-size:clamp(38px,4.8vw,60px); line-height:1.05; letter-spacing:-.05em; margin:18px 0 0; }
.portfolio-intro { max-width:390px; }
.portfolio-intro p { color:#5a5b55; margin:8px 0 0; font-size:15px; line-height:1.65; }
.portfolio-intro p:first-child { font-weight:650; color:#22241f; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; padding:0; margin:0; list-style:none; }
.portfolio-grid>li { min-width:0; }
.portfolio-card { display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid #deded6; border-radius:16px; background:#fff; text-decoration:none; transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.portfolio-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px #17201b0d; border-color:#aaa99f; }
.portfolio-card:focus-visible { outline:3px solid #087f83; outline-offset:5px; box-shadow:none; }
.portfolio-art { position:relative; height:230px; overflow:hidden; background:#e5e7e0; border-bottom:1px solid #00000009; }
.portfolio-art-scene>img { width:100%; height:100%; object-fit:cover; }
.portfolio-wickle .portfolio-art { background:#fffcf0; }
.portfolio-wickle .portfolio-art>img { object-fit:contain; }
.portfolio-status { position:absolute; top:16px; left:16px; padding:6px 10px; background:#fffffff2; color:#222b27; border:1px solid #0000000d; border-radius:5px; font-size:11px; font-weight:700; line-height:1.3; }
.portfolio-art-phone { padding-top:48px; }
.portfolio-art-phone>img { width:150px; height:auto; margin:0 auto; border:5px solid #ffffff40; border-radius:23px 23px 0 0; box-shadow:0 6px 30px #0004; }
.portfolio-snugpop .portfolio-art { background:linear-gradient(135deg,#e9d8f6,#c0a1d9); }
.portfolio-counterwave .portfolio-art { background:linear-gradient(135deg,#163c40,#0a1e28); }
.portfolio-gateblink .portfolio-art { background:linear-gradient(135deg,#263965,#111a35); }
.portfolio-body { display:flex; flex-direction:column; flex:1; padding:24px; }
.portfolio-identity { display:flex; gap:13px; align-items:center; }
.portfolio-identity>img { flex:0 0 52px; width:52px; height:52px; border-radius:12px; }
.portfolio-identity h3 { margin:0 0 4px; font-size:23px; letter-spacing:-.035em; line-height:1.15; }
.portfolio-identity p { margin:0; font-size:11px; color:#686963; line-height:1.6; }
.portfolio-description { margin:20px 0 16px; font-size:15px; line-height:1.65; color:#444841; }
.portfolio-note { margin:auto 0 20px; font-size:11px; color:#656860; line-height:1.6; }
.portfolio-link { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid #e8e8e1; font-size:13px; font-weight:700; }
.portfolio-link>span { font-size:20px; font-weight:400; line-height:1; }
.portfolio-support { display:flex; gap:20px; justify-content:space-between; align-items:center; padding-top:28px; color:#55584f; font-size:13px; }
.portfolio-support p { margin:0; }
.portfolio-support a { font-weight:650; color:#22241f; }
@media(max-width:1000px) {
 .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portfolio-heading { align-items:flex-start; }
 .portfolio-intro { max-width:320px; }
 .home-page .hero-mark { opacity:.45; right:-18%; width:75vw; }
}
@media(max-width:680px) {
 .home-page .hero { min-height:640px; }
 .home-page .hero-inner { padding-top:114px; padding-bottom:32px; }
 .home-page .hero h1 { font-size:clamp(68px,16vw,96px); margin-top:26px; }
 .home-page .hero-copy { font-size:18px; max-width:330px; }
 .home-page .hero-mark { width:110vw; right:-60%; opacity:.24; }
 .home-page .hero-facts { margin-top:42px; gap:12px; }
 .home-page .intro-section,.home-page .identity-section { padding-block:70px; }
 .home-page .lead { font-size:19px; }
 .home-page .practice-section { padding-bottom:70px; }
 .home-page .practice-item { min-height:auto; }
 .home-page .practice-item h3 { margin-top:26px; }
 .home-page .apps-section { padding-block:60px; }
 .portfolio-heading { display:block; margin-bottom:28px; }
 .portfolio-intro { max-width:450px; margin-top:22px; }
 .portfolio-grid { grid-template-columns:1fr; gap:24px; }
 .portfolio-art { height:220px; }
 .portfolio-body { padding:22px; }
 .portfolio-description { margin-top:16px; }
 .portfolio-support { align-items:flex-start; flex-direction:column; gap:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .portfolio-card { transition:none; }
 .portfolio-card:hover { transform:none; }
}

.portfolio-roomforwonder .portfolio-art { background:#173f3c; }
.portfolio-roomforwonder .portfolio-art>img { object-fit:contain; }