#app:focus{outline:none}
.project-card:nth-child(1) .project-art{background:#fff}
.discover{margin-bottom:56px}
h1,h2,h3,h4,h5,h6,.section-head h2,.project-meta h3,.case-content h2,.case-hero h1{font-family:var(--sans)!important}
@media(max-width:720px){.highlight-4{grid-column:1}.highlight-5{grid-column:2}}

/* Project resource links and Figma confidentiality component */
.confidential-widget{display:flex;align-items:center;gap:18px;max-width:564px;min-height:174px;margin-top:28px;padding:25px 30px;background:#d9d9d9;border-radius:20px;color:#202124}
.confidential-icon{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#f5f5f5;color:#333;font-size:23px}
.confidential-widget h2,.project-demo h2,.philosophy-section h2,.favorites-section h2{font:600 20px/1.3 var(--sans);margin:0 0 9px;color:#2b323f}
.confidential-widget p,.confidential-widget a{font:14px/1.5 var(--sans);margin:0;color:#303845}
.project-resources{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.project-resources a{padding:11px 16px;border:1px solid #b9c3d1;border-radius:22px;color:#285d9f;text-decoration:none;font:600 13px var(--sans)}
.project-resources a:hover{background:#e9edf3}
.project-demo{max-width:760px;margin:35px 0 0}
.project-demo iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#e9edf3;margin-top:14px}
.philosophy-section{max-width:1160px;margin:0 auto;padding:48px 34px;display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start;background:#f6f7f9}
.philosophy-section>div:first-child p{max-width:370px;font:16px/1.7 var(--sans);color:#46505d}
.philosophy-section .about-experience{padding:0;margin:0;max-width:none}
.favorites-section{max-width:1160px;margin:0 auto;padding:55px 34px 70px}
.favorites-section h2{font-size:30px;margin-bottom:30px}
.favorites-section h3{font:500 18px var(--sans);color:#303845;margin:25px 0 14px}
.favorite-grid{display:grid;gap:16px}
.favorite-grid.games{grid-template-columns:repeat(4,minmax(0,1fr))}
.favorite-grid.music{grid-template-columns:repeat(5,minmax(0,1fr))}
.favorite-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
@media(max-width:720px){.philosophy-section{grid-template-columns:1fr;gap:30px;padding:35px 7%}.favorites-section{padding:40px 7%}.favorite-grid{gap:8px}.confidential-widget{gap:12px;padding:20px 18px}.confidential-icon{flex-basis:42px;width:42px;height:42px}.project-resources{gap:8px}.project-resources a{font-size:12px}.project-demo{margin-top:25px}}

/* About page: match the supplied Figma screenshot below the hero. */
.philosophy-section{background:#fff;padding:28px 34px 40px;grid-template-columns:1fr 1fr;gap:42px;align-items:stretch}
.philosophy-card{padding:20px 22px 24px;background:#e9edf3;border-radius:14px;min-height:342px}
.philosophy-card h2,.philosophy-section .section-head h2{font:700 30px/1.2 var(--sans);color:#2b323f;margin:0 0 18px}
.philosophy-card h3{font:700 16px/1.35 var(--sans);color:#303845;margin:17px 0 2px}
.philosophy-card p{font:italic 14px/1.5 var(--sans);color:#46505d;margin:0;max-width:none}
.philosophy-section .about-experience .section-head{border:0;padding:0;margin:0 0 16px}
.philosophy-section .about-experience .section-head h2{margin:0}
.philosophy-section .experience-list{border:0}
.philosophy-section .experience-row{display:block;border:0;padding:0 0 14px}
.philosophy-section .experience-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.philosophy-section .experience-row strong{font:700 13px/1.4 var(--sans);color:#303845}
.philosophy-section .experience-row time{font:13px/1.4 var(--sans);color:#788397}
.philosophy-section .experience-row span{display:block;font:13px/1.4 var(--sans);color:#46505d;margin-top:2px}
.highlight-section{padding-top:34px;padding-bottom:48px}
.highlight-section .section-head{margin-bottom:22px}
.highlight-section .section-head h2{font-size:28px}
.highlights{gap:34px 30px}
.highlight{height:258px}
.highlight-4,.highlight-5{height:247px}
.favorites-section{padding-top:56px;padding-bottom:64px}
.favorites-section h2{font-size:26px;margin:0 0 22px}
.favorites-section h3{font-size:14px;margin:20px 0 12px}
.favorite-grid.games{grid-template-columns:repeat(4,minmax(0,104px));gap:28px}
.favorite-grid.games img{aspect-ratio:2/3;object-fit:contain;border-radius:0}
.favorite-grid.music{grid-template-columns:repeat(5,minmax(0,112px));gap:28px}
.favorite-grid.music img{aspect-ratio:1;object-fit:cover;border-radius:0}
.project-sections{max-width:1068px;margin:0 auto;padding:18px max(7.5%,calc((100% - 1068px)/2)) 55px}
.project-section{display:grid;grid-template-columns:64px minmax(0,1fr);gap:30px;padding:34px 0;border-bottom:1px solid #e2e6eb}
.project-section>.eyebrow{font:11px var(--mono);color:#718096;padding-top:9px}
.project-section-content h2{font:600 27px/1.25 var(--sans);letter-spacing:-.035em;color:#2b323f;margin:0 0 17px}
.project-section-content p{font:15px/1.75 var(--sans);color:#46505d;max-width:800px;margin:0 0 14px}
.project-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.project-items article{padding:18px;border:1px solid #e1e5ea;border-radius:12px;background:#fff}
.project-items article h3{font:600 16px/1.4 var(--sans);color:#303845;margin:0 0 8px}
.project-items article p{font-size:13px;margin:0}
.project-notice{max-width:760px;padding:16px 18px;background:#f1f4f8;border-radius:12px;color:#46505d;font:13px/1.6 var(--sans);margin-top:24px}
.inline-sources{margin:0 0 16px}
.inline-sources a{font:13px var(--sans);color:#285d9f}
@media(max-width:720px){.philosophy-section{grid-template-columns:1fr;padding:28px 7%;gap:28px}.philosophy-card{min-height:0}.highlight{height:210px}.highlight-4,.highlight-5{height:210px}.favorite-grid.games{gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.favorite-grid.music{gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}.project-sections{padding:8px 7% 40px}.project-section{grid-template-columns:1fr;gap:8px;padding:26px 0}.project-items{grid-template-columns:1fr}}

/* Supplied confidentiality component reference: stacked lock and copy. */
.confidential-widget{width:100%;max-width:564px;min-height:214px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:31px 40px 20px;background:#d9d9d9;border:0;border-radius:20px;color:#080808}
.confidential-icon{flex:0 0 46px;width:46px;height:46px;margin-left:7px;margin-bottom:12px;background:#000;border-radius:50%;display:grid;place-items:center}
.confidential-icon img{width:19px;height:19px;object-fit:contain;filter:invert(1)}
.confidential-widget h2{font:700 22px/1.08 var(--sans);max-width:490px;color:#080808;margin:0 0 13px}
.confidential-widget p,.confidential-widget a{font:16px/1.3 var(--sans);color:#111;margin:0;text-decoration:none}
.confidential-widget a:hover{text-decoration:underline}
.project-items article{overflow:hidden}
.project-items .competitor-mark{width:100%;height:142px;object-fit:contain;display:block;margin:0 0 18px;background:#fff;border-radius:8px}
.project-items article h3{margin:0 0 8px}
.project-section:has(.project-items article:nth-child(3)) .project-items{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){.confidential-widget{min-height:0;padding:25px 24px 22px}.confidential-widget h2{font-size:19px}.confidential-widget p,.confidential-widget a{font-size:14px}.project-section:has(.project-items article:nth-child(3)) .project-items{grid-template-columns:1fr}}

.project-card:nth-child(1) .project-art{background:#fff}
.project-card:nth-child(1) .project-art img{object-fit:contain;padding:0}
.confidential-icon{margin-bottom:17px}

.project-section{padding-top:42px;padding-bottom:42px}
.project-section-content p+p{margin-top:18px}
.project-items article p{line-height:1.65}
.project-items article p br+br{display:block;content:"";margin-top:8px}

.project-card:nth-child(1) .project-art{background:#fff}
.project-card:nth-child(1) .project-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:0}

/* AA contrast for small metadata text */
.philosophy-section .experience-row time{color:#626e82}
.project-section>.eyebrow{color:#626e82}

/* Narrow phone layout: keep the hero and project cards within narrow mobile viewports. */
@media(max-width:520px){
  .site-shell,.home-page{width:100%;max-width:100%;min-width:0}
  .home-page .hero{box-sizing:border-box;gap:12px}
  .hero-copy-block{flex:1;min-width:0}
  .hero-copy-block p{overflow-wrap:anywhere}
  .hero-illustration{flex:0 0 92px;width:92px;max-width:30%;height:120px}
  .project-grid{width:calc(100% - 40px);max-width:100%;min-width:0;box-sizing:border-box}
  .project-card{width:100%;min-width:0;box-sizing:border-box}
  .project-art,.project-info{min-width:0}
  .project-info h2,.project-info p{overflow-wrap:anywhere}
}