@font-face{font-family:Geist;src:url('assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:'Geist Mono';src:url('assets/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--oct-bone:#F2F0EA;--oct-charcoal:#11110F;--oct-muted:#696761;--oct-rule:#CBC8C0;--oct-instrument:#A98557;--motion-fast:180ms;--motion-standard:700ms;--motion-slow:1400ms;--ease-instrument:cubic-bezier(.22,.61,.36,1);--ease-settle:cubic-bezier(.4,0,.2,1);--gutter:6vw}*{box-sizing:border-box}html{background:var(--oct-bone)}body{margin:0;color:var(--oct-charcoal);font-family:Geist,sans-serif;-webkit-font-smoothing:antialiased}button,a{color:inherit;touch-action:manipulation}button{background:none;border:0;border-radius:0;font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--oct-instrument);outline-offset:5px}header{position:absolute;inset:15px var(--gutter) auto;display:flex;justify-content:space-between;z-index:20;font:9px 'Geist Mono',monospace;letter-spacing:.08em}header a,header button{display:flex;align-items:center;min-height:44px;text-decoration:none}.instrument svg{width:100%;height:auto;display:block}.instrument{width:min(1100px,96vw);margin:100px auto 0}.scene h2{font-weight:450;letter-spacing:-.045em;line-height:1.06;margin:0}.identity{width:min(650px,80vw);margin:30px auto 90px}.identity h1{margin:0}.identity img{width:100%;height:auto;display:block}.identity p{font:9px/1.6 'Geist Mono',monospace;text-align:center;letter-spacing:.1em;margin:25px 0 0;color:var(--oct-muted)}.foundation,.area,.datum{padding:80px var(--gutter)}.foundation h2{font-size:clamp(36px,4.7vw,72px)}.foundation h2 span{color:var(--oct-muted)}.area{border-top:1px solid var(--oct-rule)}.area h2{font-size:clamp(50px,7vw,104px)}.index{font:12px 'Geist Mono',monospace;letter-spacing:.08em;margin:0 0 30px}.function{font-size:17px;line-height:1.6;max-width:410px;margin:40px 0 0;color:var(--oct-muted)}.territory{margin:0;position:relative;background:var(--oct-charcoal)}.territory img{display:block;width:100%;height:80svh;object-fit:cover}.territory figcaption{display:flex;justify-content:space-between;gap:25px;padding:25px var(--gutter);background:var(--oct-charcoal);color:var(--oct-bone);font:9px/1.7 'Geist Mono',monospace;letter-spacing:.07em}.datum h2{font-size:clamp(100px,22vw,330px);font-variant-numeric:tabular-nums;letter-spacing:-.07em;line-height:1}.datum h2 small{font-size:.36em;vertical-align:top;display:inline-block;margin:0.16em 0 0 .25em;letter-spacing:-.04em}.sample-label,.data-subject,.data-note{font:10px/1.6 'Geist Mono',monospace;letter-spacing:.06em}.sample-label{margin:0 0 35px}.data-subject{margin:30px 0 10px}.data-note{color:var(--oct-muted)}.controls,.horizon,.shared-index{display:none}.prototype-notes{padding:30px var(--gutter);display:flex;justify-content:space-between;gap:25px;font:10px/1.7 'Geist Mono',monospace;color:var(--oct-muted)}.prototype-notes details{max-width:650px}.prototype-notes summary{cursor:pointer;min-height:44px;padding:12px 0}.prototype-notes button{align-self:start;min-height:44px;white-space:nowrap}
/* One field and one master instrument for the complete sequence. */
.motion .journey{height:720svh}.motion .stage{position:sticky;top:0;height:100svh;overflow:hidden}.motion .instrument{position:absolute;z-index:5;left:0;top:0;margin:0;transform-origin:0 0;will-change:transform}.motion .horizon{display:block;position:absolute;z-index:5;top:0;left:0;width:100%;height:1px;will-change:transform;background:var(--oct-charcoal);opacity:.46;transform-origin:left center}.motion .identity{position:absolute;left:50%;top:63%;width:min(650px,52vw);margin:0;transform:translateX(-50%)}.motion .foundation{position:absolute;left:46%;right:6%;top:39%;padding:0}.motion .area-field{position:absolute;inset:0;z-index:3}.motion .area{position:absolute;top:39%;left:38%;right:6%;padding:40px 0 0;border:0;overflow:hidden}.motion .area h2{font-size:clamp(50px,7vw,108px)}.motion .function{max-width:460px;font-size:17px}.motion .index{margin-bottom:25px}.motion .scene{visibility:hidden}.motion .territory{position:absolute;inset:0;z-index:2;overflow:hidden;will-change:clip-path}.motion .territory img{height:100%;object-position:50% 50%}.motion .territory figcaption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:100px;background:var(--oct-charcoal);padding:15px 18px;align-items:end}.motion .datum{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);top:30%;padding:0}.motion .datum h2{font-size:clamp(130px,24vw,360px)}.motion .controls{position:absolute;z-index:10;left:var(--gutter);right:var(--gutter);bottom:22px;display:flex;justify-content:space-between;align-items:center;font:9px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.controls button{font-size:9px;letter-spacing:.08em;min-height:44px;text-transform:uppercase;display:flex;align-items:center;gap:24px}.controls button span{font-size:23px}.motion.photo-state .controls{color:var(--oct-bone)}.motion.photo-state .horizon{background:var(--oct-bone)}.motion.photo-state .instrument svg g[stroke]{stroke:var(--oct-bone)}.motion.photo-state .instrument circle{fill:var(--oct-bone)}
@media(max-width:760px){:root{--gutter:7vw}.motion .journey{height:650svh}.motion .identity{width:80vw;top:59%}.motion .foundation{left:var(--gutter);right:var(--gutter);top:41%}.foundation h2{font-size:clamp(34px,8.7vw,59px)}.motion .area{left:var(--gutter);right:var(--gutter);top:42%}.motion .area h2{font-size:clamp(43px,11.5vw,76px)}.motion .function{font-size:15px;max-width:300px;margin-top:32px}.motion .index{font-size:11px;margin-bottom:25px}.motion .territory img{object-position:53% 50%}.motion .territory figcaption{bottom:100px;font-size:8px;display:block;line-height:1.8;padding:12px}.territory figcaption span{display:block}.territory figcaption span+span{margin-top:12px}.motion .datum{top:36%}.motion .datum h2{font-size:26vw}.sample-label{font-size:8px;letter-spacing:.03em;margin-bottom:30px}.data-subject,.data-note{font-size:9px}.motion .controls{font-size:8px;bottom:18px;gap:15px}.controls button{font-size:8px;gap:12px}.prototype-notes{display:block}.prototype-notes button{margin-top:12px}.foundation,.area,.datum{padding:65px var(--gutter)}}
@media(max-height:600px) and (min-width:761px){.motion .identity{width:360px;top:62%}.identity p{margin-top:12px;font-size:8px}.motion .foundation h2{font-size:35px}.motion .area{top:33%}.motion .area h2{font-size:55px}.motion .function{font-size:14px;margin-top:16px}.motion .index{margin-bottom:14px}.motion .datum{top:24%}.motion .datum h2{font-size:160px}.sample-label{margin-bottom:12px}.data-subject{margin-top:15px}.motion .territory figcaption{bottom:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body:not(.motion) .stage{display:flex;flex-direction:column}body:not(.motion) .instrument{order:0}body:not(.motion) .identity{order:1}body:not(.motion) .foundation{order:2}body:not(.motion) .area-field{order:3}body:not(.motion) .territory{order:4}body:not(.motion) .datum{order:5}

/* Existing area code remains in place while its reading changes. */
.motion .shared-index{display:block;position:absolute;left:38%;top:39%;z-index:4;margin:0;visibility:hidden}
@media(max-width:760px){.motion .shared-index{left:var(--gutter);top:42%;font-size:11px}.motion .area{padding-top:38px}}
@media(max-height:600px) and (min-width:761px){.motion .shared-index{top:33%}.motion .area{padding-top:28px}}

/* Keep the code stationary; crop the reading without its former blank header. */
.motion .area{top:calc(39% + 40px);padding-top:0}
@media(max-width:760px){.motion .area{top:calc(42% + 38px);padding-top:0}}
@media(max-height:600px) and (min-width:761px){.motion .area{top:calc(33% + 28px);padding-top:0}}
/* Company presentation replaces the demonstration figure. */
.datum h2,.motion .datum h2{font-size:clamp(36px,4.15vw,64px);font-weight:450;line-height:1.16;letter-spacing:-.035em;max-width:1100px}.motion .datum{top:34%;left:var(--gutter);right:var(--gutter)}
.work-fields{padding:80px var(--gutter) 110px;border-top:1px solid var(--oct-rule)}.work-fields h2{font:10px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;margin:0 0 55px}.work-fields ol{list-style:none;margin:0;padding:0}.work-fields li{display:grid;grid-template-columns:1fr 3fr;gap:25px;padding:32px 0;border-top:1px solid var(--oct-rule)}.work-fields li>span{font:10px 'Geist Mono',monospace;letter-spacing:.08em;padding-top:8px}.work-fields p{font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-.035em;margin:0;font-weight:450}.contact{background:var(--oct-charcoal);color:var(--oct-bone);padding:90px var(--gutter) 45px}.contact>button{display:flex;justify-content:space-between;align-items:center;gap:35px;width:100%;padding:15px 0 50px;border-bottom:1px solid var(--oct-muted);font-size:clamp(48px,8vw,120px);letter-spacing:-.05em;text-align:left;font-weight:450}.contact>button span{transition:transform var(--motion-fast) var(--ease-settle)}.contact>button:hover span{transform:translate(4px,-4px)}.contact>a{display:inline-block;margin-top:35px;font:10px 'Geist Mono',monospace;text-underline-offset:5px}dialog{width:min(600px,calc(100% - 36px));padding:35px;background:var(--oct-bone);color:var(--oct-charcoal);border:1px solid var(--oct-rule);max-height:85svh;overflow:auto}dialog::backdrop{background:rgb(17 17 15 / .65)}dialog>button{display:block;margin-left:auto;font:11px 'Geist Mono',monospace;min-height:44px}dialog h2{font-size:40px;font-weight:450;letter-spacing:-.04em}dialog p{line-height:1.6;color:var(--oct-muted)}dialog small{font:10px/1.7 'Geist Mono',monospace;color:var(--oct-muted)}
@media(max-width:760px){.datum h2,.motion .datum h2{font-size:clamp(26px,7.3vw,43px);line-height:1.2}.motion .datum{top:34%}.work-fields{padding:60px var(--gutter) 70px}.work-fields h2{margin-bottom:35px}.work-fields li{grid-template-columns:25px 1fr;gap:14px;padding:27px 0}.work-fields p{font-size:clamp(24px,6.3vw,34px)}.contact{padding-top:55px}.contact>button{font-size:clamp(42px,11vw,70px);padding-bottom:35px}dialog{padding:25px}}
@media(max-height:600px) and (min-width:761px){.motion .datum{top:31%}.motion .datum h2{font-size:clamp(28px,3.5vw,40px);max-width:900px}}
@media(max-width:380px){.contact>button{font-size:38px;gap:14px}}
/* Depth through paper planes and occlusion; brand geometry remains untouched. */
:root{--oct-bone-deep:#E7E4DC;--oct-bone-raised:#F8F7F2}.aperture-edge,.presentation-surface{display:none}.motion .territory img{will-change:transform;transform-origin:50% 50%}.motion .aperture-edge{display:block;position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0;z-index:3;pointer-events:none;will-change:transform;opacity:0}.edge-top{background:var(--oct-bone-deep)}.edge-bottom{background:var(--oct-bone-raised)}.motion .presentation-surface{display:block;position:absolute;inset:0;z-index:4;background:var(--oct-bone-raised);border-top:7px solid var(--oct-bone-deep);transform:translateY(100%);will-change:transform;pointer-events:none}
.work-fields{background:var(--oct-bone-deep);padding-top:65px;padding-bottom:75px}.work-fields h2{margin-bottom:38px}.work-fields li{grid-template-columns:minmax(60px,1fr) 5fr;padding:24px 0;border-color:var(--oct-muted)}.work-fields p{font-size:clamp(30px,3.35vw,51px);font-weight:500;line-height:1.12}.contact{padding-top:75px}
@media(max-width:760px){.motion .presentation-surface{border-top-width:4px}.work-fields{padding-top:48px;padding-bottom:50px}.work-fields h2{margin-bottom:30px}.work-fields li{grid-template-columns:22px minmax(0,1fr);gap:14px;padding:23px 0}.work-fields p{font-size:clamp(23px,6.2vw,34px);font-weight:500}.contact{padding-top:55px}}

/* Desktop subtraction: geometry is reserved for the opening and territory. */
@media(min-width:761px){
 .work-fields,.work-fields li,.contact>button,dialog,.motion .presentation-surface{border:0}
 .work-fields{padding-top:15vh;padding-bottom:15vh}
 .work-fields li{padding:34px 0}
 .motion.desktop-intermediate .controls{visibility:hidden}
 .motion.desktop-company #position-label{visibility:hidden}
 body:not(.motion) .area{border:0}
}

/* Preview only: corporate composition and full-viewport contact. */
.datum h2,.motion .datum h2{font-size:clamp(32px,4.1vw,80px);line-height:1.16;letter-spacing:-.045em;max-width:none}
.datum h2 span{display:block;white-space:nowrap}
.datum .audience{font:10px/1.8 'Geist Mono',monospace;letter-spacing:.07em;margin:52px 0 0}
.motion.desktop-company .controls{visibility:hidden}
.contact{min-height:100svh;padding:0 var(--gutter);position:relative;display:flex;flex-direction:column;justify-content:center}
.contact h2{font-size:clamp(64px,14vw,240px);font-weight:450;line-height:1;letter-spacing:-.055em;margin:0}
.contact .email{font:11px/1.7 'Geist Mono',monospace;margin:36px 0 0;letter-spacing:.04em}
.contact>a{position:absolute;bottom:35px;left:var(--gutter);margin:0;font:10px 'Geist Mono',monospace;text-underline-offset:5px}
@media(max-width:760px){.datum h2,.motion .datum h2{font-size:5.5vw;line-height:1.25}.datum .audience{font-size:8px;letter-spacing:0;margin-top:35px}.motion.desktop-company .instrument,.motion.desktop-company .horizon,.motion.desktop-company .controls{visibility:hidden!important}.contact h2{font-size:15vw}.contact .email{font-size:9px;margin-top:28px}.contact>a{font-size:9px;bottom:28px}}

/* Inverted colour study; source masters and light preview remain unchanged. */
:root{--oct-bone:#11110F;--oct-charcoal:#F2F0EA;--oct-muted:#A9A79F;--oct-rule:#44443E;--oct-bone-deep:#252522;--oct-bone-raised:#191917}
.territory,.territory figcaption,.motion .territory figcaption{background:#11110F;color:#F2F0EA}
.motion.photo-state .instrument svg g[stroke]{stroke:#F2F0EA}.motion.photo-state .instrument circle{fill:#F2F0EA}.motion.photo-state .controls{color:#F2F0EA}.motion.photo-state .horizon{background:#F2F0EA}
.contact{background:#F2F0EA;color:#11110F}

/* Narrative preview: one existing instrument, then three methodological readings. */
.motion .journey{height:1034.092svh}
.function,.motion .function{font:10px/1.7 'Geist Mono',monospace;letter-spacing:.04em}
.thesis{padding:15vh var(--gutter);min-height:100svh;background:#191917}
.thesis h2{font-size:clamp(32px,4.1vw,76px);font-weight:450;line-height:1.13;letter-spacing:-.04em;max-width:1200px}
.thesis p{font-size:clamp(13px,1.15vw,19px);line-height:1.65;color:var(--oct-muted);margin:48px 0 0}
.motion .thesis{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);top:31%;padding:0;min-height:0;background:transparent}
.business,.motion .business{position:relative;inset:auto;min-height:100svh;padding:0 var(--gutter);display:flex;flex-direction:column;justify-content:center;background:#F2F0EA;color:#11110F;visibility:visible}
body:not(.motion) .thesis{order:5}
@media(max-width:760px){.motion .journey{height:928.63svh}.motion .thesis{top:34%}.thesis h2{font-size:6.2vw;line-height:1.2}.thesis p{font-size:13px;margin-top:34px}.function,.motion .function{font-size:9px}.business,.motion .business{top:auto;left:auto;right:auto}}

/* Desktop hierarchy: content-bearing secondary text is distinct from codes. */
@media(min-width:761px){
 .motion .shared-index{left:30%;top:34%}
 .motion .area{left:30%;right:6%;top:calc(34% + 40px)}
 .function,.motion .function{font-size:clamp(18px,1.25vw,24px);line-height:1.5;letter-spacing:.025em;max-width:650px;margin-top:28px;color:#CECCC4}
 .thesis p{font-size:clamp(20px,1.65vw,30px);line-height:1.5;margin-top:32px;color:#CECCC4}
}
@media(max-height:600px) and (min-width:761px){
 .motion .shared-index{top:28%}.motion .area{top:calc(28% + 28px)}
 .function,.motion .function{font-size:16px;margin-top:20px}.thesis p{font-size:19px;margin-top:24px}
}

/* Thesis secondary readings use the official instrumental typeface. */
.thesis p{font-family:'Geist Mono',monospace;font-weight:400}

/* Closing cadence and distinct positions within the same thesis sequence. */
.business,.motion .business{min-height:115svh}
.contact{background:#11110F;color:#F2F0EA}
.contact h2{font-size:clamp(64px,10vw,170px)}
@media(min-width:761px){
 .motion .thesis-1{left:6%;right:12%;top:29%}
 .motion .thesis-2{left:25%;right:6%;top:35%}
 .motion .thesis-3{left:12%;right:6%;top:27%}
}
@media(max-width:760px){
 .contact h2{font-size:12vw}
 .business,.motion .business{min-height:110svh}
}

/* Editorial photography is scoped exclusively to the three theses. */
.editorial-signature{display:none}.motion .editorial-signature{display:block;visibility:hidden;position:absolute;inset:0;z-index:8;pointer-events:none;color:#F2F0EA}.editorial-signature>img{position:absolute;top:5.5%;left:6%;width:120px;height:auto}.editorial-signature>span{position:absolute;left:6%;bottom:6%;font:8px 'Geist Mono',monospace;letter-spacing:.035em;display:flex;align-items:center;gap:16px}.editorial-signature>span::before{content:'';display:block;width:44px;height:1px;background:currentColor}
.motion .thesis{inset:0;min-height:100%;padding:0;background:transparent}
.thesis-photo{margin:0;overflow:hidden}.thesis-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.motion .thesis-photo{position:absolute;right:0;top:0;bottom:0;width:58%;mask-image:linear-gradient(to right,transparent,#000 40%,#000 85%,transparent);z-index:0}
.motion .thesis-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,#191917 0%,transparent 20%,transparent 74%,#191917 100%);pointer-events:none}
.motion .thesis-photo img{opacity:.7;will-change:transform}
.motion .thesis-copy{position:absolute;left:6%;top:28%;right:40%;z-index:1}
.motion .thesis-copy h2{font-size:clamp(34px,3.35vw,64px);line-height:1.14}
.motion .thesis-copy p{font-size:clamp(17px,1.25vw,24px);line-height:1.6;margin-top:30px;max-width:650px;color:#CECCC4}
.motion .thesis-1 .thesis-photo img{object-position:25% 72%}
.motion .thesis-2 .thesis-copy{left:9%;right:34%;top:32%}.motion .thesis-2 .thesis-photo{width:54%}.motion .thesis-2 .thesis-photo img{object-position:57% 50%}
.motion .thesis-3 .thesis-copy{left:7%;top:25%;right:43%}.motion .thesis-3 .thesis-photo{width:59%}.motion .thesis-3 .thesis-photo img{object-position:62% 50%}
body:not(.motion) .thesis{position:relative;display:flex;flex-direction:column;gap:30px;padding:80px var(--gutter)}body:not(.motion) .thesis-copy{order:0}body:not(.motion) .thesis-photo{order:1;height:45vh;max-width:900px}
@media(max-width:760px){
 .motion .thesis .thesis-copy{left:7%;right:7%;top:17%}.motion .thesis-copy h2{font-size:7vw;line-height:1.15}.motion .thesis-copy p{font-size:13px;line-height:1.55;margin-top:23px}
 .motion .thesis .thesis-photo{width:100%;top:43%;bottom:3%;right:0;mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 70%,transparent)}
 .motion .thesis-photo img{opacity:.65}.motion .thesis-photo::after{background:linear-gradient(to right,#191917,transparent 20%,transparent 85%,#191917)}
 .editorial-signature>img{width:120px;left:7%;top:5%}.editorial-signature>span{left:7%;right:7%;bottom:4%;font-size:6px;gap:9px}.editorial-signature>span::before{width:22px}
 .motion .thesis-3 .thesis-photo{top:51%}
}

/* Reencuadre de las dos fotografías urbanas. */
.motion .thesis-2 .thesis-photo img{object-position:65% 50%}
.motion .thesis-3 .thesis-photo img{object-position:50% 63%}

/* Mobile reading sizes: scoped to the existing mobile breakpoint only. */
@media(max-width:760px){
 :root{--mobile-text:15px;--mobile-micro:12px;--mobile-micro-compact:11px;--mobile-metadata:10.5px}
 .identity p{font-size:var(--mobile-micro)}
 .function,.motion .function{font-size:var(--mobile-text)}
 .thesis p,.motion .thesis-copy p{font-size:var(--mobile-text);color:#F2F0EA}
 header{font-size:var(--mobile-micro-compact)}
 .motion .controls,.controls button{font-size:var(--mobile-micro-compact)}
 .territory figcaption,.motion .territory figcaption{font-size:var(--mobile-metadata)}
 .datum .audience{font-size:var(--mobile-micro-compact)}
 .editorial-signature>span{font-size:var(--mobile-micro-compact);letter-spacing:0}
 .contact .email{font-size:var(--mobile-micro)}
 .contact>a{font-size:var(--mobile-micro)}
 .prototype-notes{font-size:var(--mobile-micro)}
 .prototype-notes p{font-size:var(--mobile-text)}
}

/* Crowd framing: hold raised hands in the desktop crop. */
.motion .territory img{object-position:50% 42%}
@media(max-width:760px){.motion .territory img{object-position:50% 50%}}

/* Compact mobile closing; retain the approved typography and desktop. */
@media(max-width:760px){
 .business,.motion .business{min-height:58svh}
 .contact{min-height:58svh}
}

@media(max-width:760px){.motion.editorial-reading .controls{visibility:hidden;pointer-events:none}}

/* Mobile closing: content scale, natural handoff, unchanged desktop. */
.mobile-break{display:none}
@media(max-width:760px){
 .motion .shared-index{top:27%}
 .motion .area{top:calc(27% + 38px)}
 .motion .journey{height:880svh}
 .business,.motion .business{min-height:0;padding:56px var(--gutter)}
 .business h2,.motion .business h2{font-size:clamp(30px,9.6vw,66px);font-weight:550;line-height:1.05;letter-spacing:-.045em;margin:0}
 .business h2 span{white-space:normal}
 .business h2 span+span{margin-top:20px}
 .business .mobile-break{display:block}
 .business .audience{margin-top:38px}
}

/* A closer relationship between mobile instrument and wordmark. */
@media(max-width:760px){.motion .identity{top:51%}}