.sub-page { background: var(--paper); }
.sub-page .container { max-width: 1440px; }
.sub-hero { padding: 84px 0 108px; background: var(--paper); }
.sub-hero.is-dark { background: #000; color: #fff; }
.sub-hero-top { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 54px; border-bottom: 1px solid currentColor; color: #777; font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.sub-hero.is-dark .sub-hero-top { color: #aaa; border-color: #333; }
.sub-hero h1 { max-width: 1220px; margin: 64px 0 0; font-family: var(--font-display); font-size: clamp(82px, 10vw, 178px); line-height:normal; font-weight: 600; letter-spacing:normal; text-transform: uppercase; }
.sub-hero p { max-width: 650px; margin: 45px 0 0; font-size: clamp(17px, 2vw, 23px); line-height:normal; font-weight: 300; color: #555; }
.sub-hero.is-dark p { color: #ccc; }
.sub-cta { padding: 125px 0 135px; background: #000; color: #fff; }
.sub-cta .container { display: flex; align-items: end; justify-content: space-between; gap: 45px; }
.sub-cta h2 { max-width: 980px; margin: 0; font-family: var(--font-display); font-size: clamp(75px, 9vw, 148px); font-weight: 600; line-height:normal; text-transform: uppercase; }
.button-signal { flex-shrink: 0; background: var(--red); color: #fff; }
.button-signal:hover { background: #fff; color: #000; }
.catalog-section { padding: 60px 0 140px; background: var(--mist); }
.catalog-toolbar { display: grid; grid-template-columns: auto minmax(280px, 1fr) auto; align-items: center; gap: 28px; padding: 0 0 28px; border-bottom: 1px solid #c9c9ca; }
.catalog-toolbar label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing:normal; }
.catalog-toolbar input { min-width: 0; padding: 13px 16px; border: 1px solid #c9c9ca; border-radius: 999px; background: transparent; color: #000; font: inherit; font-size: 14px; outline: none; }
.catalog-toolbar input:focus { border-color: #000; }
.catalog-toolbar span { color: #777; font-size: 12px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 22px; padding-top: 40px; }
.catalog-card a, .article-card a { display: block; }
.catalog-image { width: 100%; aspect-ratio: 1 / 1.05; overflow: hidden; background: #dedede; border-radius: 24px; }
.catalog-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.catalog-card a:hover .catalog-image img, .article-card a:hover .catalog-image img { transform: scale(1.04); }
.catalog-image > span { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: 46px; text-transform: uppercase; }
.catalog-meta { display: flex; justify-content: space-between; margin: 17px 0 7px; color: #777; font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.catalog-meta span:last-child { color: #000; font-size: 18px; }
.catalog-card h2, .article-card h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3vw, 45px); line-height:normal; font-weight: 600; text-transform: uppercase; }
.catalog-card p, .article-card p { max-width: 520px; margin: 13px 0 0; color: #555; font-size: 14px; line-height:normal; font-weight: 300; }
.catalog-empty { padding: 80px 0; color: #555; }
.catalog-filters{display:flex;gap:9px;overflow-x:auto;padding:20px 0 2px;scrollbar-width:none}
.catalog-filters::-webkit-scrollbar{display:none}
.catalog-filters button{flex:none;padding:10px 15px;border:1px solid #c9c9ca;border-radius:999px;background:transparent;color:#555;white-space:nowrap;font-size:12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.catalog-filters button:hover{border-color:#000;color:#000}
.catalog-filters button.is-active{background:#000;border-color:#000;color:#fff}
.case-hero { padding: 62px 0 95px; background: var(--paper); }
.back-link { display: inline-flex; padding-bottom: 6px; border-bottom: 1px solid #000; font-size: 12px; }
.back-link:hover { color: var(--red); border-color: var(--red); }
.case-meta { display: block; margin-top: 90px; color: var(--red); font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.case-hero h1 { max-width: 1300px; margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(78px, 9.3vw, 160px); font-weight: 600; line-height:normal; letter-spacing:normal; text-transform: uppercase; }
.case-hero p { max-width: 740px; margin: 38px 0 0; color: #555; font-size: 18px; font-weight: 300; line-height:normal; }
.case-cover { height: min(72vw, 800px); overflow: hidden; border-radius: 24px; background: #e0e0e0; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-story { display: grid; grid-template-columns: minmax(160px, .3fr) minmax(0, 1fr); gap: 80px; padding-top: 110px; padding-bottom: 140px; }
.case-story aside { display: flex; flex-direction: column; align-items: start; gap: 24px; font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.case-story aside span { color: var(--red); }
.case-story aside a { padding-bottom: 5px; border-bottom: 1px solid #000; }
.richtext { max-width: 870px; overflow-wrap: anywhere; font-size: 17px; line-height:normal; font-weight: 300; }
.richtext p, .richtext ul, .richtext ol { margin: 0 0 25px; }
.richtext h2, .richtext h3, .richtext h4 { margin: 60px 0 22px; font-family: var(--font-display); font-weight: 600; line-height:normal; text-transform: uppercase; }
.richtext h2 { font-size: clamp(45px, 5vw, 72px); }
.richtext h3 { font-size: clamp(35px, 4vw, 54px); }
.richtext h4 { font-size: 31px; }
.richtext a { color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.richtext figure { margin: 40px 0; }
.richtext img, .richtext video, .richtext iframe { max-width: 100%; height: auto; border-radius: 16px; }
.richtext iframe { width: 100%; aspect-ratio: 16 / 9; }
.richtext figcaption { padding-top: 8px; color: #777; font-size: 12px; }
.richtext blockquote { margin: 35px 0; padding-left: 25px; border-left: 2px solid var(--red); font-family: var(--font-display); font-size: 34px; line-height:normal; }
.next-project { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 80px max(48px, calc((100vw - 1440px) / 2)); background: #000; color: #fff; }
.next-project > span:first-child { grid-column: 1 / -1; color: #aaa; font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.next-project strong { font-family: var(--font-display); font-size: clamp(62px, 7.7vw, 132px); line-height:normal; text-transform: uppercase; font-weight: 600; }
.next-project > span:last-child { font-size: 44px; align-self: end; }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.article-card .catalog-image { aspect-ratio: 1.7; margin-bottom: 20px; }
.article-card > a > span { color: var(--red); font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.article-card h2 { max-width: 660px; margin-top: 15px; font-size: clamp(43px, 4.5vw, 70px); }
.article-card b { display: inline-block; margin-top: 25px; border-bottom: 1px solid #000; font-size: 12px; font-weight: 500; }
.article-hero h1 { max-width: 1100px; }
.service-index { padding: 20px 0 130px; }
.service-index article { display: grid; grid-template-columns: 70px 1fr 50px; align-items: start; gap: 30px; padding: 32px 0; border-top: 1px solid #bbb; }
.service-index article:last-child { border-bottom: 1px solid #bbb; }
.service-index article > span { color: var(--red); font-size: 12px; }
.service-index h2 { margin: 0; font-family: var(--font-display); font-size: clamp(52px, 6vw, 96px); line-height:normal; font-weight: 600; text-transform: uppercase; }
.service-index p { max-width: 610px; margin: 20px 0 10px; color: #555; font-size: 17px; line-height:normal; }
.service-index small { color: #888; font-size: 12px; }
.service-index article > a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #000; border-radius: 50%; font-size: 21px; }
.service-index article > a:hover { background: #000; color: #fff; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding-top: 90px; padding-bottom: 130px; }
.feature-split h2, .about-feature h2, .process > h2 { margin: 0; font-family: var(--font-display); font-size: clamp(68px, 7.2vw, 115px); line-height:normal; font-weight: 600; text-transform: uppercase; }
.feature-split p, .about-feature p { max-width: 500px; margin: 25px 0; color: #555; font-size: 18px; font-weight: 300; line-height:normal; }
.feature-split img { width: 100%; max-height: 650px; object-fit: contain; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 100px; padding-bottom: 130px; }
.demo-grid a { min-height: 600px; display: flex; flex-direction: column; align-items: start; padding: 45px; background: #000; color: #fff; overflow: hidden; }
.demo-grid a:last-child { background: #ececec; color: #000; }
.demo-grid span { font-size: 11px; text-transform: uppercase; letter-spacing:normal; color: #aaa; }
.demo-grid a:last-child span { color: #555; }
.demo-grid h2 { max-width: 600px; margin: auto 0 20px; font-family: var(--font-display); font-size: clamp(70px, 7vw, 116px); font-weight: 600; line-height:normal; text-transform: uppercase; }
.demo-grid p { max-width: 390px; font-size: 16px; line-height:normal; color: #ccc; }
.demo-grid a:last-child p { color: #555; }
.demo-grid strong { margin-top: 22px; font-size: 12px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.about-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 75px; padding-top: 110px; padding-bottom: 130px; }
.about-feature img { width: 100%; background: #000; }
.process { padding-bottom: 140px; }
.process > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
.process article { padding-top: 20px; border-top: 1px solid #999; }
.process span { color: var(--red); font-size: 11px; }
.process h3 { margin: 30px 0 8px; font-family: var(--font-display); font-size: 36px; font-weight: 600; text-transform: uppercase; }
.process p { color: #555; font-size: 14px; }
.contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 115px; padding-bottom: 170px; }
.contact-page > div:first-child span { color: var(--red); font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.contact-page h2 { margin: 25px 0 0; font-family: var(--font-display); font-size: clamp(85px, 8.4vw, 145px); line-height:normal; font-weight: 600; text-transform: uppercase; }
.contact-page > div:last-child { align-self: end; }
.contact-page .button { margin-bottom: 60px; }
.contact-page-line { display: flex; justify-content: space-between; gap: 15px; padding: 20px 0; border-top: 1px solid #bbb; font-size: 13px; }
.contact-page-line span { font-size: 15px; }
.contact-page-line:hover { color: var(--red); }
.client-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 140px; }
.client-grid span { display: grid; place-items: center; min-height: 175px; padding: 20px; border: 1px solid #dedede; margin: -1px 0 0 -1px; font-family: var(--font-display); font-size: 39px; font-weight: 600; text-align: center; text-transform: uppercase; }
.faq-list { padding-top: 10px; padding-bottom: 140px; }
.faq-list details { border-top: 1px solid #aaa; }
.faq-list details:last-child { border-bottom: 1px solid #aaa; }
.faq-list summary { display: flex; justify-content: space-between; gap: 30px; padding: 30px 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: clamp(35px, 4.5vw, 65px); text-transform: uppercase; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 680px; padding-bottom: 35px; color: #555; font-size: 17px; line-height:normal; }
.generic-content { padding-top: 80px; padding-bottom: 140px; min-height: 300px; }
.generic-content > p { font-size: 18px; line-height:normal; }
.interactive-experience { padding: 105px 0 140px; background: #ececeb; }
.interactive-experience.is-tour { background: #f8f8f7; }
.experience-heading { display: flex; justify-content: space-between; align-items: end; gap: 55px; margin-bottom: 48px; }
.experience-heading > div > span { color: var(--red); font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.experience-heading h2, .experience-copy h2 { max-width: 840px; margin: 16px 0 0; font-family: var(--font-display); font-size: clamp(70px, 8.2vw, 135px); line-height:normal; font-weight: 600; text-transform: uppercase; }
.experience-heading > p { max-width: 400px; margin: 0 0 5px; color: #555; font-size: 17px; line-height:normal; font-weight: 300; }
.webar-layout { display: grid; grid-template-columns: minmax(230px, .38fr) minmax(0, 1fr); gap: 24px; }
.model-list { display: flex; flex-direction: column; border-top: 1px solid #aaa; }
.model-choice { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 79px; padding: 12px 10px; border: 0; border-bottom: 1px solid #aaa; background: transparent; color: #777; text-align: left; font-family: var(--font-display); font-size: clamp(28px, 3vw, 45px); line-height:normal; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.model-choice span { align-self: start; padding-top: 5px; font-family: var(--font-body); font-size: 10px; font-weight: 500; }
.model-choice:hover, .model-choice.is-active { color: #000; }
.model-choice.is-active span { color: var(--red); }
.model-stage { min-width: 0; overflow: hidden; background: #fff; border-radius: 22px; }
.model-stage-top, .model-stage-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 18px 24px; color: #555; font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.model-stage-top { border-bottom: 1px solid #e2e2e2; }
.model-stage-top span:last-child { color: #000; }
.model-stage-bottom { border-top: 1px solid #e2e2e2; }
.model-stage model-viewer { display: block; width: 100%; height: clamp(440px, 50vw, 650px); background: #f5f5f4; }
.model-ar-button { position: absolute; bottom: 24px; right: 24px; padding: 13px 19px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 500 12px var(--font-body); cursor: pointer; }
.model-ar-button:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.tour-shell { overflow: hidden; border-radius: 22px; background: #000; color: #fff; }
.tour-top, .tour-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 17px 25px; color: #ccc; font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.tour-top { border-bottom: 1px solid #333; }
.tour-bottom { border-top: 1px solid #333; }
.tour-bottom a { color: #fff; }
.tour-bottom a:hover { color: var(--red); }
.tour-frame { position: relative; height: min(63vw, 720px); min-height: 460px; }
.tour-frame iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tour-shell.is-active iframe { pointer-events: auto; }
.tour-activate { position: absolute; inset: 0; display: flex; align-items: end; justify-content: space-between; padding: 35px; border: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .8)); color: #fff; font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 85px); font-weight: 600; text-transform: uppercase; cursor: pointer; text-align: left; }
.tour-activate span { font-family: var(--font-body); font-size: 45px; }
.tour-shell.is-active .tour-activate { display: none; }
.experience-copy { display: flex; justify-content: space-between; align-items: end; gap: 60px; padding-top: 125px; padding-bottom: 140px; }
.experience-copy h2 { margin-top: 0; }
.experience-copy p { max-width: 450px; margin: 0; color: #555; font-size: 19px; line-height:normal; font-weight: 300; }
.game-teaser { min-height: 600px; display: flex; align-items: center; margin-top: 100px; margin-bottom: 130px; padding: 80px; background: #000 url('/assets/game-callout-bg-desktop-optimized.jpg') center / cover no-repeat; color: #fff; }
.game-teaser > div { max-width: 650px; }
.game-teaser span { color: #ccc; font-size: 11px; text-transform: uppercase; letter-spacing:normal; }
.game-teaser h2 { margin: 20px 0; font-family: var(--font-display); font-size: clamp(75px, 8vw, 130px); font-weight: 600; line-height:normal; text-transform: uppercase; }
.game-teaser p { max-width: 440px; margin: 0 0 30px; color: #ccc; font-size: 17px; line-height:normal; }
.game-play { padding-top: 90px; padding-bottom: 130px; }
.game-play-bar { display: flex; justify-content: space-between; gap: 20px; padding: 18px 24px; background: #000; color: #fff; font-size: 11px; letter-spacing:normal; text-transform: uppercase; }
.game-play-bar a:hover { color: var(--red); }
.game-play iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 580px; border: 0; background: #000; }
.game-play > p { max-width: 720px; margin: 20px 0 0; color: #555; font-size: 13px; line-height:normal; }
.site-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 85px; padding-top: 60px; padding-bottom: 140px; }
.site-map h2 { margin: 0 0 26px; font-family: var(--font-display); font-size: 55px; font-weight: 600; text-transform: uppercase; }
.site-map ul { margin: 0; padding: 0; list-style: none; }
.site-map li { border-top: 1px solid #ccc; }
.site-map li:last-child { border-bottom: 1px solid #ccc; }
.site-map a { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; font-size: 14px; }
.site-map a:hover { color: var(--red); }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .nav-shell { grid-template-columns: 1fr auto; }
  .menu-toggle { display: block; }
}

@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-story { gap: 45px; }
  .sub-hero h1 { font-size: clamp(78px, 11vw, 130px); }
}

@media (max-width: 760px) {
  .sub-hero { padding: 45px 0 75px; }
  .sub-hero-top { padding-bottom: 25px; }
  .sub-hero h1 { margin-top: 45px; font-size: clamp(70px, 14vw, 105px); }
  .sub-hero p { margin-top: 30px; font-size: 17px; }
  .sub-cta { padding: 90px 0; }
  .sub-cta .container { align-items: start; flex-direction: column; }
  .sub-cta h2 { font-size: clamp(70px, 13vw, 100px); }
  .catalog-section { padding: 35px 0 90px; }
  .catalog-toolbar { grid-template-columns: 1fr auto; gap: 12px; }
  .catalog-toolbar input { grid-column: 1 / -1; grid-row: 2; }
  .catalog-grid { gap: 50px 14px; }
  .catalog-image { border-radius: 18px; }
  .catalog-card h2 { font-size: 32px; }
  .case-hero { padding: 40px 0 65px; }
  .case-meta { margin-top: 60px; }
  .case-hero h1 { font-size: clamp(68px, 12vw, 110px); }
  .case-cover { height: 65vw; border-radius: 16px; }
  .case-story { grid-template-columns: 1fr; gap: 45px; padding-top: 75px; padding-bottom: 90px; }
  .case-story aside { flex-direction: row; justify-content: space-between; }
  .next-project { padding: 65px 18px; }
  .article-grid, .feature-split, .about-feature, .contact-page, .demo-grid { grid-template-columns: 1fr; }
  .feature-split, .about-feature { padding-top: 80px; padding-bottom: 90px; gap: 40px; }
  .demo-grid { padding-top: 60px; padding-bottom: 90px; }
  .demo-grid a { min-height: 440px; padding: 30px; }
  .service-index { padding-bottom: 90px; }
  .service-index article { grid-template-columns: 36px 1fr 44px; gap: 15px; }
  .service-index h2 { font-size: clamp(42px, 8vw, 68px); }
  .process { padding-bottom: 90px; }
  .process > div { grid-template-columns: repeat(2, 1fr); }
  .contact-page { padding-top: 80px; padding-bottom: 100px; gap: 45px; }
  .client-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 90px; }
  .faq-list { padding-bottom: 90px; }
  .experience-heading, .experience-copy { display: block; }
  .experience-heading > p { margin-top: 25px; }
  .interactive-experience { padding: 80px 0 90px; }
  .webar-layout { grid-template-columns: 1fr; }
  .model-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-choice { min-height: 80px; border-right: 1px solid #aaa; font-size: 28px; }
  .tour-frame { min-height: 400px; }
  .experience-copy { padding-top: 90px; padding-bottom: 90px; }
  .experience-copy p { margin-top: 30px; }
  .game-teaser { min-height: 500px; margin-top: 60px; margin-bottom: 90px; padding: 35px; }
  .game-play { padding-top: 60px; padding-bottom: 90px; }
  .game-play iframe { min-height: 450px; }
  .site-map { gap: 50px; padding-bottom: 90px; }
}

@media (max-width: 480px) {
  .sub-hero h1 { font-size: clamp(58px, 15vw, 78px); }
  .sub-hero-top { font-size: 9px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-image { aspect-ratio: 1.15; }
  .catalog-card h2 { font-size: 38px; }
  .case-hero h1 { font-size: clamp(60px, 14vw, 80px); }
  .case-hero p { font-size: 16px; }
  .case-story aside { flex-direction: column; }
  .next-project strong { font-size: 62px; }
  .service-index article { grid-template-columns: 28px 1fr 36px; gap: 9px; }
  .service-index h2 { font-size: 38px; }
  .service-index article > a { width: 34px; height: 34px; font-size: 17px; }
  .process > div { grid-template-columns: 1fr; }
  .contact-page h2 { font-size: 75px; }
  .contact-page-line { display: block; }
  .contact-page-line span { display: block; margin-top: 8px; overflow-wrap: anywhere; }
  .client-grid span { min-height: 120px; font-size: 28px; }
  .experience-heading h2, .experience-copy h2 { font-size: 65px; }
  .model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-choice { min-height: 65px; gap: 10px; font-size: 23px; }
  .model-stage model-viewer { height: 430px; }
  .model-stage-top, .model-stage-bottom, .tour-top, .tour-bottom { padding: 14px; font-size: 9px; }
  .model-stage-bottom { display: block; }
  .model-stage-bottom span { display: block; margin: 4px 0; }
  .tour-frame { height: 470px; min-height: 0; }
  .tour-activate { padding: 20px; font-size: 44px; }
  .game-teaser { min-height: 460px; padding: 24px; }
  .game-teaser h2 { font-size: 65px; }
  .game-play-bar { display: block; padding: 14px; }
  .game-play-bar a { display: block; margin-top: 9px; }
  .game-play iframe { min-height: 620px; }
  .site-map { grid-template-columns: 1fr; }
}