/* Multipage extension. The approved homepage styles remain in the original files.
   These components reuse the existing tokens, buttons, typography, and motion. */

.header nav { gap: 23px; }
.footer-links nav a.active { color: var(--text); }
.preview-link { margin-top: 35px; }
.project-title .project-link { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; color: #c4b8c0; }
.project-link span { font-size: 23px; transition: transform .25s; }
.project-link:hover { color: var(--red); }
.project-link:hover span { transform: translate(3px,-3px); }

.page-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; position: relative; isolation: isolate; overflow: hidden; min-height: 665px; padding-top: 85px; padding-bottom: 90px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(40px,4.6vw,69px); line-height: 1.06; }
.page-hero .hero-copy { min-width: 0; }
.page-hero .hero-description { max-width: 480px; }
.page-hero .hero-note { margin-top: 27px; }
.page-art { height: 440px; margin-left: 0; }
.page-art .scene { inset: 0; }
.page-art .architecture { left: 30%; top: 10%; scale: .8; opacity: .8; }
.scene-module { position: absolute; width: 215px; min-height: 115px; padding: 20px; background: linear-gradient(135deg,#281c24f2,#100e13f5); border: 1px solid #673447; border-radius: 5px; box-shadow: 0 25px 50px #0008; transform-style: preserve-3d; }
.scene-module .micro-label { font-size: 7px; color: #b19ba9; }
.scene-module strong { display: block; font-size: 19px; letter-spacing: -.5px; font-weight: 500; line-height: 1.3; margin-top: 12px; max-width: 170px; }
.scene-module i { position: absolute; right: 15px; top: 12px; font-style: normal; color: var(--red); }
.module-line { display: block; height: 3px; width: 55%; background: linear-gradient(90deg,var(--red),#512235); margin-top: 16px; }
.module-1 { left: -2%; top: 3%; transform: rotateY(12deg) rotate(-7deg) translateZ(40px); }
.module-2 { right: -3%; top: 35%; transform: rotateY(-18deg) rotate(8deg) translateZ(90px); }
.module-3 { left: 1%; bottom: 2%; transform: rotateY(15deg) rotate(-4deg) translateZ(65px); }
.art-services .scene-module { border-left: 3px solid var(--red); }
.art-projects .scene-module { min-height: 135px; }
.art-projects .module-line { height: 28px; width: 100%; background: repeating-linear-gradient(90deg,#e5154333 0 17px,transparent 17px 22px); }
.art-about .architecture { scale: 1.1; left: 25%; }
.art-about .scene-module { width: 172px; min-height: 75px; padding: 14px; background: #160f17e8; }
.art-about .scene-module strong { font-size: 15px; }
.art-process .scene::before { content: ''; position: absolute; inset: 60px 70px; border: 1px dashed #a12948; transform: rotate(-25deg); }
.art-process .scene-module { width: 170px; }
.art-process .architecture { opacity: .25; }
.art-industries .module-1 { transform: rotateY(25deg) rotateX(12deg) rotate(-10deg); }
.art-industries .module-2 { transform: rotateY(-25deg) rotateX(-8deg) rotate(10deg); }
.art-industries .module-3 { transform: rotateX(10deg) rotate(-7deg); }
.art-contact .architecture { scale: .9; }
.art-contact .scene-module { width: 180px; min-height: 100px; border-radius: 50%; padding: 25px; text-align: center; }
.art-contact .scene-module strong { font-size: 16px; }
.art-contact .module-line { margin-left: auto; margin-right: auto; }
.art-contact .scene::after { content: ''; position: absolute; inset: 80px 30px; border: 1px solid #aa25484d; border-radius: 50%; transform: rotate(-30deg) rotateX(40deg); z-index: -1; }

.detail-row { display: grid; grid-template-columns: 70px 1fr 280px; gap: 45px; padding: 80px 0; border-bottom: 1px solid var(--line); align-items: center; }
.detail-number { align-self: start; color: #713044; font: 36px var(--mono); letter-spacing: -2px; }
.detail-copy h2 { font-size: clamp(30px,3.4vw,48px); }
.detail-copy > p:not(.eyebrow) { font-size: 13px; max-width: 550px; margin-top: 22px; line-height: 1.9; }
.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px; list-style: none; padding: 0; margin: 27px 0 30px; color: #b9adb9; font-size: 12px; }
.capability-list li { padding-left: 16px; position: relative; }
.capability-list li::before { content: '+'; position: absolute; left: 0; color: var(--red); }
.detail-visual { aspect-ratio: 1; display: grid; place-items: center; position: relative; perspective: 650px; isolation: isolate; }
.detail-visual > span { font: 73px var(--mono); color: var(--red); text-shadow: 0 10px 35px #ef123b45; transform: rotateY(-20deg) rotateX(10deg) rotate(-10deg); }
.detail-visual > i { position: absolute; bottom: 15%; font: 7px var(--mono); color: #a67588; letter-spacing: 1px; }
.detail-visual > b { position: absolute; inset: 15%; border: 1px solid #813047; background: linear-gradient(135deg,#44122322,#170e1688); transform: rotateY(-25deg) rotateX(12deg) rotate(-15deg); z-index: -1; box-shadow: 15px 16px 0 #230f1a,16px 17px 0 #6e253b; }
.detail-visual > b + b { inset: 25%; transform: rotateY(20deg) rotateX(-10deg) rotate(15deg) translateZ(-30px); opacity: .5; }
.detail-row:nth-child(even) .detail-visual { transform: rotate(12deg); }
.service-path { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.service-path a { padding: 25px 18px; background: var(--panel); display: flex; flex-direction: column; gap: 15px; font-size: 15px; position: relative; transition: background .2s; }
.service-path a:hover { background: #28141e; }
.service-path span { font: 9px var(--mono); color: var(--red); }
.service-path b { position: absolute; right: 15px; top: 17px; color: #a78899; font-weight: 400; }
.project-filters { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.project-filters button { background: transparent; border: 1px solid #3a2c35; padding: 12px 18px; text-transform: uppercase; letter-spacing: .8px; font: 10px var(--mono); color: #a899a7; transition: color .2s,background .2s,border-color .2s; }
.project-filters button:hover { color: #fff; border-color: #9b3b57; }
.project-filters button[aria-pressed=true] { color: white; background: var(--red); border-color: var(--red); }
.filter-count { font: 9px var(--mono); margin: 20px 0 30px; color: #a894a4; }
.project-card[hidden] { display: none; }
.editorial-copy { font-size: 18px; line-height: 1.9; max-width: 770px; }
.mission { border-top: 1px solid var(--line); }
.philosophy-lines { position: relative; z-index: 1; display: grid; gap: 33px; }
.philosophy-lines h2 { font-size: clamp(28px,4vw,58px); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.feature-block { background: var(--panel); padding: 32px; }
.feature-block .eyebrow { display: block; color: #b05e79; margin-bottom: 25px; }
.feature-block h3 { font-size: 21px; margin-bottom: 15px; }
.feature-block p { font-size: 12px; line-height: 1.9; }
.feature-section { background: #0d0b0e; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stage-deliverables { border-top: 1px solid var(--line); margin-top: 28px; }
.stage-deliverables summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 0; cursor: pointer; list-style: none; font-size: 12px; }
.stage-deliverables summary::-webkit-details-marker { display: none; }
.stage-deliverables summary span { color: var(--red); font-size: 22px; transition: transform .25s; }
.stage-deliverables[open] summary span { transform: rotate(45deg); }
.stage-deliverables .capability-list { margin-top: 10px; }
.stage-deliverables p { font-size: 11px; }
.stage-deliverables strong { color: #cbbbc8; font-weight: 500; }
.industry-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.industry-detail { position: relative; padding: 35px; border: 1px solid var(--line); background: radial-gradient(at 100% 0%,#7f193322,transparent 60%),var(--panel); transition: transform .25s,border-color .25s; }
.industry-detail:hover { border-color: #783247; }
.industry-detail h2 { font-size: 30px; max-width: 420px; }
.industry-detail > p:not(.eyebrow) { font-size: 12px; line-height: 1.9; margin: 20px 0; max-width: 430px; }
.industry-detail .tags { min-height: 52px; align-content: flex-start; }
.industry-detail .tags span { font-size: 9px; }
.industry-detail .text-button { margin-top: 17px; }

.case-hero h1 { font-size: clamp(45px,6.1vw,90px); overflow-wrap: anywhere; }
.case-hero h2 { font-size: clamp(23px,2.4vw,34px); font-weight: 500; letter-spacing: -.04em; line-height: 1.25; margin-top: 20px; max-width: 570px; }
.case-hero .back-link { display: inline-block; margin-bottom: 30px; color: #ad8b9d; }
.case-showcase { padding-top: 70px; }
.case-visual { border: 1px solid #4b2836; padding: 18px; background: #130f14; }
.case-visual .project-visual { height: 540px; cursor: default; }
.case-visual .project-visual > div { width: 620px; left: 50%; margin-left: -310px; top: 130px; scale: 1.6; transform-origin: center; }
.case-visual .project-visual:hover > div { transform: none; }
.case-visual .visual-arrow { display: none; }
.case-visual .visual-tag { font-size: 9px; left: 35px; bottom: 27px; }
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.case-split h3 { font-size: 29px; max-width: 460px; margin-bottom: 24px; }
.case-split p:not(.eyebrow) { font-size: 14px; line-height: 1.95; }
.case-tech { grid-template-columns: repeat(4,1fr); }
.case-tech span { font-size: 14px; }
.workflow-showcase { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; perspective: 1000px; }
.workflow-panel { background: linear-gradient(135deg,#21151f,#100e12); border: 1px solid #633047; box-shadow: 10px 15px 25px #0004; }
.workflow-body { padding: 28px; }
.workflow-node { display: block; color: var(--red); font: 30px var(--mono); margin-bottom: 25px; }
.workflow-body h3 { font-size: 21px; min-height: 52px; }
.skeleton-line { background: #46303f; width: 95%; height: 5px; margin-top: 22px; }
.skeleton-line.short { width: 65%; margin-top: 10px; opacity: .6; }
.workflow-check { border: 1px solid #513344; padding: 12px; font: 9px var(--mono); margin-top: 35px; color: #baa4b6; }
.workflow-check span { color: var(--red); margin-right: 8px; }
.concept-chat { background: #201923; border: 1px solid #625068; padding: 32px; align-self: center; box-shadow: 15px 20px 0 #130f17; }
.chat-question,.chat-answer { font-size: 12px; line-height: 1.9; padding: 15px; margin-top: 18px; border-radius: 8px; }
.chat-question { background: #584360; margin-left: 25%; }
.chat-answer { background: #312734; margin-right: 12%; color: #c9b8d0; }
.chat-prompt { display: inline-block; border: 1px solid #706076; padding: 9px 14px; font-size: 10px; margin-top: 20px; }
.concept-chat small { display: block; color: #b39bbb; font-size: 9px; margin-top: 22px; }
.palette { display: flex; gap: 20px; margin-top: 35px; }
.palette span { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #b29caa; }
.palette span::before { content: ''; width: 35px; height: 35px; display: block; background: var(--swatch); border: 1px solid #ffffff30; }
.next-project { padding-top: 45px; padding-bottom: 55px; }
.next-project > a { display: flex; justify-content: space-between; align-items: center; font-size: clamp(32px,4vw,60px); font-weight: 700; letter-spacing: -.05em; }
.next-project > a span { color: var(--red); }

@keyframes page-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
main { transition: opacity .13s ease; }
.page-leaving main { opacity: .2; }
.page-hero .hero-copy { animation: page-arrive .55s .2s both; }
.page-art .scene-module { animation: float 8s ease-in-out infinite; }
.page-art .module-2 { animation-delay: -3s; }
.page-art .module-3 { animation-delay: -5s; }
.offscreen .scene-module { animation-play-state: paused; }

@media (max-width:1100px) {
 .header nav { gap: 16px; }
 .header nav a { font-size: 11px; }
 .page-hero { gap: 15px; min-height: 600px; }
 .page-art { scale: .82; transform-origin: center; margin-left: -30px; }
 .page-hero h1 { font-size: 4.8vw; }
 .detail-row { grid-template-columns: 50px 1fr 200px; gap: 30px; padding: 65px 0; }
 .detail-number { font-size: 30px; }
 .detail-visual > span { font-size: 60px; }
 .feature-block { padding: 25px; }
 .industry-detail { padding: 28px; }
 .case-hero h1 { font-size: 6vw; }
 .case-visual .project-visual { height: 470px; }
 .case-visual .project-visual > div { top: 100px; scale: 1.15; }
}
@media (max-width:900px) and (min-width:801px) {
 .nav-shell { gap: 15px; padding-left: 4%; padding-right: 4%; }
 .header .logo { width: 100px; }
 .header nav { gap: 12px; }
 .header nav a { font-size: 10px; }
 .nav-cta { font-size: 10px; gap: 12px; padding: 9px 12px; }
}
@media (max-width:800px) {
 .header nav { gap: 0; }
 .header nav a { font-size: 24px; }
 .page-hero { grid-template-columns: 1.2fr 1fr; min-height: 590px; padding-top: 65px; padding-bottom: 65px; }
 .page-hero h1 { font-size: 5.3vw; }
 .page-hero .button { font-size: 10px; padding: 13px 16px; gap: 20px; }
 .page-hero .hero-description { font-size: 12px; }
 .page-art { scale: .68; margin-left: -70px; margin-right: -40px; }
 .detail-row { grid-template-columns: 40px 1fr 140px; gap: 25px; }
 .detail-visual > span { font-size: 44px; }
 .detail-visual > i { font-size: 5px; bottom: 8%; }
 .capability-list { font-size: 11px; gap: 10px 15px; }
 .detail-copy > p:not(.eyebrow) { font-size: 12px; }
 .service-path { grid-template-columns: repeat(3,1fr); }
 .feature-grid { grid-template-columns: repeat(2,1fr); }
 .feature-block h3 { font-size: 19px; }
 .industry-detail h2 { font-size: 25px; }
 .industry-detail { padding: 24px; }
 .industry-details { gap: 16px; }
 .case-split { gap: 35px; }
 .case-split h3 { font-size: 25px; }
 .case-split p:not(.eyebrow) { font-size: 12px; }
 .workflow-showcase { gap: 15px; }
 .workflow-body { padding: 20px; }
 .workflow-body h3 { font-size: 18px; }
 .workflow-check { font-size: 7px; padding: 9px; }
 .case-tech { grid-template-columns: repeat(2,1fr); }
 .case-hero h1 { font-size: 7vw; }
 .case-visual .project-visual { height: 380px; }
 .case-visual .project-visual > div { scale: .85; top: 65px; }
 .editorial-copy { font-size: 16px; }
}
@media (max-width:600px) {
 .page-hero { grid-template-columns: 1fr; gap: 15px; padding-top: 48px; padding-bottom: 55px; min-height: 0; }
 .page-hero h1 { font-size: clamp(34px,8.3vw,49px); }
 .page-hero .hero-description { font-size: 12px; }
 .page-hero .hero-note { margin-top: 22px; font-size: 8px; }
 .page-art { scale: 1; height: 320px; margin: 0; }
 .page-art .scene { width: 360px; height: 340px; left: 50%; margin-left: -180px; top: -10px; scale: .8; }
 .page-art .architecture { left: 23%; top: 3%; scale: .65; }
 .page-art .scene-caption { bottom: -8px; }
 .scene-module { width: 180px; padding: 16px; min-height: 100px; }
 .scene-module strong { font-size: 17px; }
 .page-art .module-1 { top: 4%; left: 0; }
 .page-art .module-2 { right: 0; top: 37%; }
 .page-art .module-3 { bottom: 0; left: 3%; }
 .art-about .architecture { scale: .85; }
 .art-contact .scene-module { width: 160px; min-height: 95px; padding: 22px; }
 .page-hero .hero-copy { padding-bottom: 10px; }
 .detail-row { grid-template-columns: 35px 1fr; gap: 18px; padding: 50px 0; position: relative; }
 .detail-number { font-size: 25px; }
 .detail-copy h2 { font-size: 30px; }
 .detail-copy .eyebrow { font-size: 7px; }
 .detail-copy > p:not(.eyebrow) { font-size: 12px; }
 .detail-visual { grid-column: 2; width: 155px; justify-self: center; margin-top: 5px; }
 .detail-visual > span { font-size: 47px; }
 .detail-visual > i { bottom: 7%; font-size: 5px; }
 .capability-list { grid-template-columns: 1fr; margin: 23px 0; font-size: 12px; }
 .detail-copy .button { font-size: 10px; gap: 20px; padding: 13px 17px; }
 .service-path a { padding: 20px 12px; font-size: 12px; }
 .service-path a b { right: 10px; }
 .project-filters { gap: 8px; }
 .project-filters button { padding: 11px 13px; font-size: 8px; }
 .project-title .project-link { font-size: 9px; gap: 8px; }
 .feature-grid { grid-template-columns: 1fr; }
 .feature-block { padding: 27px; }
 .feature-block .eyebrow { margin-bottom: 15px; }
 .feature-block h3 { font-size: 22px; }
 .philosophy-lines h2 { font-size: 7.3vw; }
 .editorial-copy { font-size: 14px; line-height: 1.9; }
 .industry-details { grid-template-columns: 1fr; gap: 20px; }
 .industry-detail { padding: 27px; }
 .industry-detail h2 { font-size: 28px; }
 .industry-detail .tags { min-height: 0; }
 .case-hero h1 { font-size: clamp(43px,12vw,65px); }
 .case-hero h2 { font-size: 25px; line-height: 1.2; }
 .case-hero .back-link { margin-bottom: 20px; }
 .case-showcase { padding-top: 35px; }
 .case-visual { padding: 7px; }
 .case-visual .project-visual { height: 280px; }
 .case-visual .project-visual > div { scale: .48; top: 15px; }
 .case-visual .visual-tag { font-size: 5px; left: 13px; bottom: 15px; }
 .case-split { grid-template-columns: 1fr; gap: 38px; }
 .case-split h3 { font-size: 27px; }
 .case-split p:not(.eyebrow) { font-size: 13px; }
 .case-tech span { font-size: 12px; }
 .workflow-showcase { grid-template-columns: 1fr; gap: 22px; }
 .workflow-body { padding: 27px; }
 .workflow-body h3 { font-size: 23px; min-height: 0; }
 .workflow-check { font-size: 10px; padding: 14px; }
 .concept-chat { padding: 23px; box-shadow: 7px 10px 0 #130f17; }
 .palette { flex-direction: column; gap: 15px; }
 .next-project { padding-top: 30px; padding-bottom: 35px; }
 .next-project > a { font-size: 36px; }
}
@media (max-width:360px) {
 .page-art .scene { scale: .69; }
 .page-art { height: 285px; }
 .page-hero .button-row { gap: 8px; }
 .page-hero .button { padding: 12px; font-size: 9px; gap: 14px; }
 .case-visual .project-visual > div { scale: .39; top: -4px; }
 .case-visual .project-visual { height: 240px; }
}
@media (prefers-reduced-motion:reduce) {
 .page-hero .hero-copy,.page-art .scene-module { animation: none; }
 main { transition: none; }
 .page-leaving main { opacity: 1; }
}