.project-animation{aspect-ratio:auto;isolation:isolate;max-width:600px}.project-scene{position:relative;aspect-ratio:1.17;perspective:1300px;overflow:hidden;border-radius:22px}.scene-grid{position:absolute;inset:5% 1% 2%;background-image:linear-gradient(#24414d09 1px,transparent 1px),linear-gradient(90deg,#24414d09 1px,transparent 1px);background-size:32px 32px;transform:rotateX(54deg) rotateZ(-28deg) scale(1.05);mask-image:radial-gradient(ellipse,black,transparent 65%);opacity:.55;transition:opacity 1s}.scene-halo{position:absolute;inset:9% 2%;border-radius:50%;background:radial-gradient(ellipse,#ffd8b42d,transparent 70%);border:1px solid #f0d9c640;transform:rotate(-20deg)}.morph-sheet{position:absolute;top:5%;left:21%;width:60%;height:82%;padding:23px 23px 16px;background:#fffefb;color:#294451;border:1px solid #d9dce0;border-radius:3px;box-shadow:0 13px 45px #17324220,3px 4px 0 #f5f0e6;transform:rotateY(-9deg) rotateZ(-6deg);transform-origin:50% 70%;transition:transform 1.7s cubic-bezier(.22,.72,.18,1),opacity 1.3s,background 1.2s,border-radius 1.3s,box-shadow 1s;z-index:3}.application-header{display:flex;align-items:center;gap:8px;border-bottom:2px solid #263f50;padding-bottom:12px;position:relative;transition:opacity .4s}.application-seal{font-family:Georgia,serif;font-size:18px;line-height:1;display:grid;place-items:center;width:30px;height:30px;position:relative;border:1px solid #2c4e5e}.application-seal>span{font-size:8px;position:absolute;right:5px;bottom:5px;background:white;line-height:1}.application-header>div>b{font-size:9px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.035em;display:block}.application-header>div>span{display:block;font-size:6px;color:#6b7a84;margin-top:2px}.sheet-ref{position:absolute;bottom:-13px;right:0;font-family:monospace;font-size:6px;background:white;padding-left:5px}.application-subtitle{font-family:Georgia,serif;font-size:21px;line-height:1.2;padding-top:18px;margin-bottom:17px;letter-spacing:-.015em;transition:opacity .4s}.application-fields{display:grid;gap:11px;transition:opacity .4s}.application-fields>div{border-bottom:1px solid #e3e5e4;padding-bottom:7px}.application-fields span{display:block;font-size:6px;font-weight:700;letter-spacing:.07em;margin-bottom:3px;color:#7b898e}.application-fields strong{display:block;font-weight:500;font-size:9px;line-height:1.45}.application-plan{background:#f4f7f8;margin-top:14px;color:#517483;border:1px solid #dce5e8;height:30%;padding:3px;transition:background .8s,color .8s,transform 1.4s}.application-plan>svg{display:block;width:100%;height:calc(100% - 12px)}.application-plan>span{display:block;text-align:center;font-size:5px;letter-spacing:.07em;line-height:1.6}.application-signoff{position:absolute;left:23px;right:23px;bottom:12px;display:flex;justify-content:space-between;font-family:monospace;font-size:6px;color:#70828a;transition:opacity .3s}.architect-layer{position:absolute;inset:0;opacity:0;transform:translateY(32px) scale(.82);transition:opacity .9s,transform 1.8s cubic-bezier(.22,.72,.18,1);z-index:4;pointer-events:none}.building-wireframe{width:100%;height:100%;overflow:visible}.wire-house path{stroke-dasharray:1000;stroke-dashoffset:0}.wire-dimensions{opacity:.65}.completed-layer{position:absolute;inset:-6% -3% -4%;opacity:0;transform:translateY(25px) scale(.92);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);transition:opacity .5s,transform 2s cubic-bezier(.22,.72,.18,1),clip-path 2s cubic-bezier(.22,.72,.18,1);z-index:5;pointer-events:none}.project-render{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 8px 16px #24414d0d)}.scan-line{position:absolute;left:10%;right:10%;height:1px;bottom:4%;background:linear-gradient(90deg,transparent,#c4491d90,transparent);opacity:0;box-shadow:0 0 18px #c4491d50;z-index:6;pointer-events:none}.stage-caption{position:absolute;left:2%;top:7%;display:flex;align-items:center;gap:9px;max-width:74%;z-index:8;transition:transform .8s,opacity .8s;pointer-events:none}.caption-number{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;font-size:10px;border:1px solid #e2d2c4;background:#fff9f2d9;border-radius:50%;color:var(--orange);font-weight:700}.caption-eyebrow{display:block;font-size:6px;letter-spacing:.12em;color:#7f8a8d;line-height:1.5}.caption-title{display:block;font-size:10px;font-weight:600;line-height:1.6;color:var(--ink)}.project-animation[data-stage="application"] .stage-caption{transform:translate(-4px,0);max-width:70%;top:auto;bottom:1%}.project-animation[data-stage="design"] .morph-sheet{transform:translateY(80px) rotateX(68deg) rotateZ(-30deg) scale(1.2,.9);background:#e4edf1;box-shadow:0 5px 14px #17324210;border-radius:0;opacity:.3}.project-animation[data-stage="design"] .application-header,.project-animation[data-stage="design"] .application-subtitle,.project-animation[data-stage="design"] .application-fields,.project-animation[data-stage="design"] .application-signoff{opacity:0}.project-animation[data-stage="design"] .application-plan{background:transparent;border-color:transparent;color:#396a7e;transform:scale(1.1) translateY(-12px)}.project-animation[data-stage="design"] .architect-layer{opacity:1;transform:translateY(0) scale(1)}.project-animation[data-stage="design"] .wire-house path{animation:trace-building 1.7s ease-out both}.project-animation[data-stage="design"] .scene-grid{opacity:1}.project-animation[data-stage="complete"] .morph-sheet{transform:translateY(105px) rotateX(80deg) rotateZ(-30deg) scale(1.2,.8);opacity:0;box-shadow:none}.project-animation[data-stage="complete"] .architect-layer{opacity:0;transform:translateY(0) scale(1.02);transition:opacity 1.8s,transform 1.8s}.project-animation[data-stage="complete"] .completed-layer{opacity:1;transform:translateY(0) scale(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.project-animation[data-stage="complete"] .scan-line{animation:build-scan 2s cubic-bezier(.22,.72,.18,1) both}.project-animation[data-stage="complete"] .scene-grid{opacity:.15}.project-animation[data-stage="complete"] .stage-caption{opacity:0}.completion-label{position:absolute;right:3%;bottom:4%;z-index:8;background:#fffefaf5;border:1px solid #e1e4dd;box-shadow:0 8px 24px #17324210;display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:9px;transform:translateY(20px);opacity:0;transition:transform .8s 1.5s,opacity .8s 1.5s;pointer-events:none}.completion-label>span{width:28px;height:28px;border-radius:50%;background:#dcebe0;color:#408775;display:grid;place-items:center;font-size:14px}.completion-label small{display:block;font-size:6px;letter-spacing:.1em;color:#688579;line-height:1.7}.completion-label strong{display:block;font-size:10px;font-weight:600}.project-animation[data-stage="complete"] .completion-label{opacity:1;transform:translateY(0)}.animation-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px;margin-top:10px;border-top:1px solid #dedbd1;gap:8px}.project-stages{display:flex;align-items:center;gap:14px;min-width:0}.project-stages button{border:0;background:none;display:flex;align-items:center;gap:5px;font-size:10px;color:#7a8588;padding:6px 0;font-weight:600;white-space:nowrap}.project-stages button>span{font-size:8px;color:#98a4a5}.project-stages button[aria-pressed="true"],.project-stages button[aria-pressed="true"]>span{color:var(--orange)}.animation-controls{display:flex;gap:5px}.animation-controls button{width:30px;height:30px;border:1px solid #deded4;background:#fffbf5;border-radius:50%;display:grid;place-items:center;padding:6px}.animation-controls svg{width:16px;height:16px}.animation-controls button:hover{border-color:var(--orange);color:var(--orange)}.animation-progress{height:2px;background:#e5dfd4;overflow:hidden}.animation-progress>span{display:block;height:100%;width:0;background:var(--orange);transition:width .08s linear}.animation-footnote{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;color:#849091;font-size:8px}.animation-footnote button{padding:0;border:0;background:none;color:#4d6874;font-size:9px;font-weight:600}.animation-footnote button:hover{color:var(--orange)}.animation-paused .wire-house path,.animation-paused .scan-line{animation-play-state:paused}.sample-application-dialog{width:min(620px,calc(100% - 32px));border:1px solid #d7ddd6;border-radius:12px;background:var(--cream);color:var(--ink);padding:30px;max-height:90vh;overflow:auto;box-shadow:0 25px 90px #102b3b3b}.sample-application-dialog::backdrop{background:#102b3ba6;backdrop-filter:blur(5px)}.sample-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.sample-dialog-header>span{font-size:8px;font-weight:700;letter-spacing:.12em}.close-application{font-size:25px;border:0;background:none;line-height:1;width:32px;height:32px}.sample-application-dialog h2{font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.025em;margin-bottom:20px}.sample-dialog-notice{font-size:11px;background:#f4e9dd;border-left:2px solid var(--orange);padding:12px;margin-bottom:20px}.sample-application-dialog dl{margin:0}.sample-application-dialog dl>div{display:grid;grid-template-columns:140px 1fr;gap:15px;border-bottom:1px solid #dedfd7;padding:12px 0;font-size:12px;line-height:1.6}.sample-application-dialog dt{font-weight:600}.sample-application-dialog dd{margin:0;color:var(--muted)}.sample-dialog-plan{margin:25px 0;background:white;border:1px solid #dce4df;padding:16px;color:#517483}.sample-dialog-plan svg{width:100%;height:180px}.sample-application-dialog .button{font-size:12px;min-height:45px;padding:12px 18px}@keyframes trace-building{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes build-scan{0%{bottom:3%;opacity:0}10%{opacity:1}85%{opacity:.8}100%{bottom:95%;opacity:0}}
@media(max-width:1100px){.morph-sheet{padding:18px 18px 14px}.application-subtitle{font-size:18px;margin-bottom:13px;padding-top:15px}.application-fields{gap:9px}.application-fields strong{font-size:8px}.application-header>div>b{font-size:8px}.application-header>div>span{font-size:5px}.application-seal{width:24px;height:24px;font-size:16px}.application-plan{margin-top:10px;height:28%}.project-stages{gap:10px}.project-stages button{font-size:9px}.animation-footnote{font-size:7px;gap:8px}.animation-footnote button{font-size:8px}}
@media(min-width:601px) and (max-width:800px){.project-animation{width:108%;margin-left:-8%}.morph-sheet{padding:14px;left:19%;width:65%;top:3%;height:86%}.application-subtitle{font-size:16px;padding-top:13px;margin-bottom:10px}.application-fields strong{font-size:7px}.application-fields span{font-size:5px}.application-fields{gap:5px}.application-header{gap:5px;padding-bottom:10px}.application-header>div>b{font-size:6px}.application-header>div>span{font-size:4px}.application-seal{width:20px;height:20px;font-size:13px}.application-signoff{left:14px;right:14px;bottom:7px;font-size:5px}.application-plan{height:27%;margin-top:9px}.project-stages{gap:7px}.project-stages button{font-size:8px;gap:3px}.project-stages button>span{font-size:6px}.animation-controls button{width:25px;height:25px;padding:5px}.animation-footnote{display:block;line-height:1.8}.animation-footnote button{display:block;font-size:8px}.caption-title{font-size:8px}.caption-eyebrow{font-size:5px}.caption-number{width:23px;height:23px;font-size:8px}.completion-label{padding:9px 10px;gap:8px}.completion-label strong{font-size:8px}.completion-label>span{width:24px;height:24px}.completion-label small{font-size:5px}}
@media(max-width:600px){.project-animation{width:100%;margin-left:0;margin-top:25px;max-width:430px}.project-scene{aspect-ratio:1.08}.morph-sheet{width:64%;left:20%;top:3%;height:84%;padding:16px 16px 12px}.application-subtitle{font-size:17px;padding-top:15px;margin-bottom:11px}.application-fields{gap:7px}.application-fields strong{font-size:7px}.application-fields span{font-size:5px}.application-fields>div{padding-bottom:5px}.application-header{gap:6px;padding-bottom:10px}.application-header>div>b{font-size:7px}.application-header>div>span{font-size:4px}.application-seal{font-size:15px;width:23px;height:23px}.application-plan{height:28%;margin-top:11px}.application-signoff{left:16px;right:16px;font-size:5px;bottom:9px}.sheet-ref{font-size:5px}.project-stages{gap:10px}.project-stages button{font-size:9px;gap:4px}.project-stages button>span{font-size:7px}.animation-controls button{width:27px;height:27px;padding:5px}.animation-toolbar{padding-block:9px;margin-top:13px;gap:7px}.animation-footnote{font-size:6px;gap:6px}.animation-footnote button{font-size:7px}.caption-number{width:24px;height:24px;font-size:8px}.caption-title{font-size:8px}.caption-eyebrow{font-size:5px}.stage-caption{gap:7px}.completion-label{padding:10px 12px;gap:8px;bottom:2%}.completion-label small{font-size:5px}.completion-label strong{font-size:9px}.completion-label>span{width:25px;height:25px;font-size:12px}.sample-application-dialog{padding:22px}.sample-application-dialog h2{font-size:26px}.sample-application-dialog dl>div{grid-template-columns:1fr;gap:4px;font-size:12px;padding-block:11px}.sample-dialog-notice{font-size:10px}.sample-dialog-header>span{font-size:7px}}
@media(max-width:380px){.morph-sheet{padding:12px;width:69%;left:16%;height:88%;top:1%}.application-header>div>b{font-size:6px}.application-subtitle{font-size:16px;margin-bottom:8px;padding-top:13px}.application-fields strong{font-size:6px}.application-fields span{font-size:4px}.application-fields{gap:6px}.application-plan{height:25%;margin-top:8px}.application-signoff{left:12px;right:12px;bottom:8px;font-size:4px}.project-stages{gap:7px}.project-stages button{font-size:8px;gap:3px}.project-stages button>span{font-size:6px}.animation-controls button{width:24px;height:24px;padding:5px}.animation-controls{gap:4px}.animation-footnote{display:block;font-size:7px;line-height:1.8}.animation-footnote button{font-size:8px;display:block}}
.completed-layer{inset:0;mix-blend-mode:multiply}.architect-layer{mix-blend-mode:multiply}.wireframe-render{width:100%;height:100%;object-fit:contain}.project-animation[data-stage="complete"] .architect-layer{transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.project-animation *{transition:none!important;animation:none!important}.project-animation[data-stage="complete"] .completion-label{opacity:1}.project-animation .animation-progress{display:none}}