:root{--paper:#ffffff;--ink:#181b22;--muted:#717580;--line:#e7e8ed;--lime:#ffebdc;--green:#F18129}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Rajdhani',sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #639440;outline-offset:5px}button{color:inherit}::selection{background:var(--lime)}.wrap{max-width:1280px;width:calc(100% - 112px);margin-inline:auto}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;font-family:'Rajdhani',sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.3px}.brand-light{font-weight:450}.brand small{display:block;font-size:7px;letter-spacing:2.1px;margin-top:4px}.brand-icon{position:relative;display:grid;place-items:center;background:var(--lime);font-size:36px;width:43px;height:44px;border-radius:11px;margin-right:10px;line-height:1}.brand-icon span{position:absolute;font-size:20px;right:4px;top:0}.header nav{display:flex;gap:32px;font-size:13px}.header nav a:hover,footer a:hover{color:#628541}.header-cta{border:1px solid #bcc4b5;border-radius:6px;padding:12px 17px;font-size:13px}.header-cta span{margin-left:22px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:48px;padding-top:74px;padding-bottom:66px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:650;display:flex;align-items:center;gap:9px;margin:0 0 25px}.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#F18129;flex-shrink:0}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Rajdhani',sans-serif}h1{font-size:clamp(48px,5.4vw,76px);font-weight:500;letter-spacing:-4.3px;line-height:1.08;margin-bottom:29px}.highlight{position:relative;display:inline-block;z-index:1}.highlight svg{position:absolute;left:0;bottom:-9px;width:100%;height:17px;z-index:-1;stroke:#b9e375;stroke-width:9;fill:none}.hero-description{max-width:395px;font-size:15px;line-height:1.85;color:#717580;margin-bottom:28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:33px;border:0;border-radius:6px;padding:17px 21px;font-size:12px;font-weight:550;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.dark{background:var(--ink);color:white}.button span{font-size:18px}.hero-foot{display:flex;gap:9px;align-items:center;font-size:10px;color:#777e70;margin-top:34px}.tiny-cross{font-size:22px;color:#7e9565}.lab-visual{height:490px;position:relative;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#edf5db 0%,#e6eddd 60%,#e3e9dc 100%);isolation:isolate}.visual-grid{position:absolute;inset:0;background-image:linear-gradient(#a1b08b16 1px,transparent 1px),linear-gradient(90deg,#a1b08b16 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(transparent,black,transparent)}.visual-label{position:absolute;top:24px;left:25px;font-size:9px;letter-spacing:1.7px;display:flex;gap:8px;align-items:center}.orbit{position:absolute;left:50%;top:49%;border:1px solid #a2b68e75;width:320px;height:320px;border-radius:50%;transform:translate(-50%,-50%)}.orbit-two{width:410px;height:410px;border-style:dashed;opacity:.6}.orbit-three{width:250px;height:370px;transform:translate(-50%,-50%) rotate(48deg);border-color:#93ae7370}.core{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%) rotate(-13deg);display:grid;place-items:center;width:183px;height:183px;border-radius:47px;background:linear-gradient(140deg,#e4f9ae,#a8c66c);box-shadow:inset 3px 4px 7px #ffffffb0,inset -5px -8px 15px #66854045,14px 25px 35px #6c7d4833}.core-symbol{font-size:150px;line-height:1;color:#345431;text-shadow:1px 3px 0 #d5e7ac;transform:rotate(13deg)}.floating-chip{position:absolute;background:#ffffffdf;backdrop-filter:blur(10px);padding:13px 17px;border:1px solid #fff;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:11px;box-shadow:0 6px 20px #263d2110}.floating-chip span{font-size:21px}.chip-code{left:25px;top:142px;transform:rotate(-9deg)}.chip-commerce{right:20px;top:237px;transform:rotate(7deg)}.chip-idea{left:83px;bottom:67px;transform:rotate(-5deg)}.visual-plus{position:absolute;color:#748a5e;font-weight:400;font-size:22px}.plus-one{right:56px;top:90px}.plus-two{left:38px;bottom:115px}.visual-bottom{position:absolute;bottom:22px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#707e62}.discipline-strip{border-block:1px solid var(--line)}.discipline-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:24px}.discipline-strip span{font-size:10px;color:var(--muted)}.discipline-strip p{display:flex;align-items:center;gap:25px;font-size:13px;margin:0;font-weight:500}.discipline-strip i{font-style:normal;color:#8a9f6d;font-size:20px}.section{padding-block:84px}.intro{display:grid;grid-template-columns:1fr 2.05fr;gap:40px}.section-label{padding-top:12px;align-self:start}h2{font-weight:500;font-size:38px;letter-spacing:-1.7px;line-height:1.25;margin-bottom:25px}.muted{color:#8c9383}.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:34px}.intro-columns p,.steps p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:0}.projects-section{background:#fefcfa;border-block:1px solid #e4e7dd}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.section-heading h2{margin:0}.section-heading>p{color:var(--muted);font-size:12px;line-height:1.8;margin-bottom:5px}.section-heading .eyebrow{margin-bottom:20px}.project-toolbar{display:flex;justify-content:space-between;align-items:center;margin:35px 0 25px;gap:20px}.filters{display:flex;gap:6px}.filter{border:1px solid transparent;background:none;border-radius:5px;padding:10px 14px;font-size:11px}.filter span{font-size:9px;margin-left:9px;color:#8c9383}.filter.active{background:var(--ink);color:white}.filter.active span{color:#c4ccbd}.filter:hover:not(.active){background:#e2e7d8}.catalog-note{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.project-card{background:#ffffff;border:1px solid #eee9e5;border-radius:9px;overflow:hidden;transition:transform .2s,box-shadow .2s}.project-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #283b1d0b}.project-card[hidden]{display:none}.project-art{height:218px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eee9e5}.art-commerce{background:#fff5ee}.art-tag{position:absolute;left:19px;top:18px;font-size:8px;letter-spacing:1px;color:#59634f}.art-number{position:absolute;right:16px;bottom:12px;font-size:8px;letter-spacing:1.5px;color:#77826b}.mini-window{margin-top:30px;width:195px;height:135px;background:#f9fcf3;border:1px solid #ffffff;border-radius:7px;box-shadow:6px 10px 20px #7d8f5d20;transform:rotate(-6deg)}.mini-top{padding:10px;border-bottom:1px solid #e0e6d6;display:flex;gap:3px;align-items:center}.mini-top i{width:3px;height:3px;border-radius:50%;background:#adba9b}.mini-top span{font-size:5px;letter-spacing:1px;margin-left:9px;color:#9aa58d}.commerce-diagram{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:15px}.store-icon,.module-icon{height:41px;width:43px;border-radius:8px;display:grid;place-items:center;font-size:31px;background:#e5edda;color:#718c52}.module-icon{background:#c9e798;color:#36552f}.connector{color:#a9b898}.mini-lines{margin:12px auto;width:90px}.mini-lines span{display:block;height:3px;background:#e2e8d8;margin:5px;border-radius:2px}.mini-lines span:last-child{width:50px;margin-inline:auto}.art-automation{background:#fcf5f0}.flow{display:flex;align-items:center;margin-top:5px}.flow-node{display:grid;place-items:center;border:1px solid white;background:#fcfaf8;width:48px;height:48px;border-radius:12px;font-size:24px;color:#9695b2;box-shadow:0 5px 10px #7661500a}.flow>span{height:1px;width:28px;background:#bcbacf}.main-node{width:64px;height:64px;color:#74708e;font-size:34px;background:#e5d9d0}.flow-caption{position:absolute;bottom:44px;font-size:6px;letter-spacing:1px;color:#928da5}.art-research{background:#f8f6f4}.research-orbit{position:relative;width:180px;height:150px;margin-top:20px;display:grid;place-items:center}.research-orbit div{position:absolute;width:165px;height:80px;border:1px solid #c0b994;border-radius:50%;transform:rotate(-35deg)}.research-orbit div:nth-child(2){transform:rotate(35deg)}.research-orbit div:nth-child(3){transform:rotate(90deg)}.research-orbit span{font-size:67px;color:#a39b71;background:#f8f6f4;border-radius:50%;line-height:1}.card-body{padding:22px}.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:#738067;margin-bottom:19px}.card-meta span{font-size:8px;border:1px solid #dce2d3;padding:4px 7px;border-radius:20px;letter-spacing:0}h3{font-weight:650;font-size:18px;letter-spacing:-.6px;margin-bottom:11px}.card-body p{color:var(--muted);font-size:12px;line-height:1.8;min-height:65px;margin-bottom:18px}.project-link{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:17px 0 0;font-size:11px;text-align:left}.project-link span{font-size:18px}.project-disclaimer{font-size:10px;color:var(--muted);margin:20px 0 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:45px}.step-number{display:flex;justify-content:space-between;color:#8c987c;font-size:11px;padding:0 0 16px;border-bottom:1px solid #cdd4c2;margin-bottom:23px}.step-number span{font-size:18px}.steps h3{font-size:19px}.contact{background:#221b15;border-radius:12px;padding:46px 49px;display:flex;justify-content:space-between;gap:30px;color:#f4f6ed}.contact .eyebrow{font-size:8px;color:#b7c5aa}.contact .status-dot{background:var(--lime)}.contact h2{font-size:45px;margin-bottom:17px;letter-spacing:-2px}.contact em{font-style:normal;color:var(--lime)}.contact p:not(.eyebrow){font-size:12px;line-height:1.8;color:#aebba8;margin-bottom:0}.contact-side{min-width:220px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.contact-asterisk{font-size:145px;font-weight:400;line-height:1;color:var(--lime)}.lime{background:var(--lime);color:var(--ink);width:100%}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:37px;font-size:10px;color:#7a8370}.footer-brand{font-size:21px;color:var(--ink);gap:0}.footer-parent{font-size:9px;font-weight:400;letter-spacing:0;color:#7a8370;margin-left:21px}dialog{border:1px solid var(--line);border-radius:14px;max-width:560px;width:calc(100% - 36px);padding:42px;background:var(--paper);color:var(--ink);box-shadow:0 20px 80px #14210f40}dialog::backdrop{background:#16241185;backdrop-filter:blur(5px)}dialog h2{font-size:31px}dialog p{font-size:14px;line-height:1.8;color:var(--muted)}dialog .eyebrow{font-size:9px}.dialog-close{position:absolute;right:14px;top:9px;border:0;background:none;font-size:28px}.dialog-note{padding:15px;background:#eaf0e0;border-radius:6px}.dialog-dismiss{margin-top:9px}
@media(min-width:1500px){.hero{gap:80px}.lab-visual{height:520px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:30px}h1{font-size:58px}.lab-visual{height:450px}.discipline-strip .wrap{flex-direction:column;gap:14px}.project-grid{gap:14px}.card-body{padding:18px}.card-body h3{font-size:16px}.chip-commerce{right:9px}.chip-code{left:12px}.header nav{gap:18px}.intro{grid-template-columns:.7fr 2fr}.footer-parent{display:none}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:88px}.brand{font-size:24px}.brand-icon{width:36px;height:39px}.brand small{font-size:6px}.header nav{display:none}.header-cta{font-size:11px;padding:10px 12px}.header-cta span{margin-left:10px}.hero{grid-template-columns:1fr;padding-top:44px;padding-bottom:40px;gap:32px}h1{font-size:60px;letter-spacing:-3.5px}.eyebrow{font-size:8px;letter-spacing:1.2px}.hero-description{font-size:14px;max-width:420px}.hero-foot{margin-top:23px}.lab-visual{height:380px}.core{width:155px;height:155px}.core-symbol{font-size:130px}.orbit-one{width:270px;height:270px}.orbit-two{width:350px;height:350px}.orbit-three{width:210px;height:320px}.chip-code{top:111px;left:25px}.chip-commerce{top:208px;right:20px}.chip-idea{bottom:49px;left:65px}.discipline-strip p{flex-wrap:wrap;justify-content:center;gap:10px 15px;font-size:11px}.discipline-strip i{font-size:15px}.section{padding-block:54px}.intro{grid-template-columns:1fr;gap:4px}h2{font-size:32px}.intro-columns{gap:20px}.section-heading{display:block}.section-heading>p{margin-top:19px}.project-toolbar{align-items:start;flex-direction:column;margin-top:24px;gap:16px}.filter{font-size:10px;padding:10px}.filter span{margin-left:5px}.project-grid{grid-template-columns:1fr;gap:22px}.project-art{height:240px}.card-body{padding:23px}.card-body h3{font-size:21px}.card-body p{min-height:0;font-size:13px}.catalog-note{display:none}.steps{grid-template-columns:1fr 1fr;gap:30px 23px}.contact{padding:30px;flex-direction:column}.contact h2{font-size:35px}.contact .eyebrow{line-height:1.7}.contact-side{flex-direction:row;gap:25px;min-width:0}.contact-asterisk{font-size:80px}.contact .button{width:auto;font-size:11px;gap:20px;padding:15px}.contact p br{display:none}footer{flex-wrap:wrap;padding-block:29px;gap:20px}.footer-brand{width:100%}.footer-parent{display:block}dialog{padding:33px 24px}.visual-label{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Bioprox Labs — spacious typography, technical grid and an orange particle field. */
:root{--muted:#656b78;--line:#e7e9ee;--accent:#F18129}
body{background:#fff;color:#202127}.wrap{max-width:1280px}.header{height:96px;border-bottom:0}.brand{font-size:25px;letter-spacing:-1.2px}.brand-icon{background:none;color:var(--accent);font-size:43px;width:37px;margin-right:10px}.brand small{display:none}.brand-light{margin-left:5px;color:#858995}.header nav{font-size:13px;gap:36px;color:#626772}.header nav a:hover,footer a:hover{color:var(--accent)}.header-cta{border-color:#e1e3e9;border-radius:30px;padding:12px 20px}.hero{position:relative;display:block;text-align:center;padding-top:75px;padding-bottom:0;max-width:1440px;width:100%;overflow:hidden}.hero-copy{position:relative;z-index:1;padding-inline:24px}.hero-badge{display:inline-flex;border:1px solid #f0e9e3;border-radius:30px;padding:9px 13px;font-size:9px;letter-spacing:1.4px;margin-bottom:30px}.hero h1{font-size:clamp(60px,7.6vw,108px);line-height:1.04;font-weight:500;letter-spacing:-6px;margin-bottom:27px}.highlight{color:var(--accent)}.hero-description{max-width:610px;margin:0 auto 30px;color:#717580;font-size:16px;line-height:1.8}.hero-actions{display:flex;justify-content:center;gap:12px}.button{border-radius:30px;font-size:12px;padding:15px 23px;min-height:50px}.dark{background:#24272e}.dark:hover{background:#F18129}.secondary{background:#f7f4f1;color:#454b58}.secondary:hover{background:#f3ece7}.particle-scene{height:280px;position:relative;margin-top:-20px;pointer-events:none;overflow:hidden}.particle-scene img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;animation:field-arrive 1.8s ease-out both}.scene-caption,.scene-coordinate{position:absolute;bottom:22px;font:8px 'Rajdhani',sans-serif;letter-spacing:1.5px;color:#8a92a2}.scene-caption{left:56px}.scene-coordinate{right:56px}.discipline-strip{border-color:#f3efec}.discipline-strip .wrap{padding-block:26px}.discipline-strip span{font:8px 'Rajdhani',sans-serif;letter-spacing:1px}.discipline-strip p{color:#555d6b;font-size:12px;gap:28px}.discipline-strip i{color:#c8b8ac;font-size:16px}.section{padding-block:105px}.eyebrow{font-family:'Rajdhani',sans-serif;color:#727b8c;font-size:9px;letter-spacing:1.7px}.intro{grid-template-columns:.8fr 2fr}.intro h2{font-size:44px;letter-spacing:-2px}.muted{color:#9298a5}.intro-columns{gap:42px}.intro-columns p,.steps p{font-size:13px;line-height:1.9;color:#737987}.projects-section{border-color:#f2ede9;background-color:#fefcfa;background-image:linear-gradient(90deg,transparent calc(100% - 1px),#f3e6db2b 1px);background-size:80px 100%}.section-heading h2{font-size:46px;font-weight:500;letter-spacing:-2px}.section-heading>p{font-size:13px;color:#818694}.project-toolbar{border-bottom:1px solid #eee7e1;padding-bottom:17px;margin-bottom:28px}.filters{gap:9px}.filter{border-radius:30px;padding:10px 17px}.filter.active{background:#fcf1e8;color:#cb7836}.filter.active span{color:#d29c72}.filter:hover:not(.active){background:#f6f1ed}.catalog-note{color:#7b8495}.project-card{border-radius:12px;border-color:#efe8e3;box-shadow:0 3px 6px #5d3f2803}.project-card:hover{box-shadow:0 14px 35px #80522e10}.project-art{height:240px;background-image:radial-gradient(#d5b39932 .7px,transparent .7px);background-size:12px 12px}.art-tag,.art-number{font-family:'Rajdhani',sans-serif;font-size:8px;color:#79869f}.mini-window{transform:rotate(-5deg);background:#fff;box-shadow:6px 15px 25px #a5734c14;border-color:#f4e7dc;width:210px;height:143px}.mini-top{border-color:#f7efe8}.mini-top i{background:#e5ccb8}.mini-top span{color:#b99f8a}.store-icon{background:#fcf5ef;color:#d79f73}.module-icon{background:#ffebdc;color:#e48d48}.connector{color:#e4bc9d}.mini-lines span{background:#f7efe8}.flow-node{color:#c4a993}.main-node{background:#faebe0;color:#bd9271}.flow>span{background:#e1cdbe}.research-orbit div{border-color:#d7c2b2}.research-orbit span{color:#ac8f78;background:#f8f6f4}.card-body{padding:25px}.card-meta{color:#7a8494}.card-meta span{border-color:#eee6e0;color:#737f94}.card-body h3{font-size:18px;font-weight:600}.card-body p{color:#7c8290}.project-link{border-color:#f5f1ed;color:#424b5c}.project-link:hover{color:var(--accent)}.project-disclaimer{color:#8a91a0}.step-number{border-color:#efe8e3;color:#b09784;font-family:'Rajdhani',sans-serif}.step-number span{color:#d6c2b2}.steps h3{font-weight:500}.contact{position:relative;overflow:hidden;border-radius:16px;background:#fcf6f2;border:1px solid #f6eee7;color:#352920;padding:58px 60px}.contact:before{content:'';position:absolute;right:-130px;top:-180px;width:540px;height:540px;background:radial-gradient(circle,#fae5d47a,transparent 65%);pointer-events:none}.contact>div{position:relative}.contact .eyebrow{color:#a48c7a}.contact .status-dot{background:#F18129}.contact h2{font-size:49px;letter-spacing:-2.4px}.contact em{color:#F18129}.contact p:not(.eyebrow){color:#7a8496}.contact-asterisk{color:#F18129;font-size:125px;font-family:'Rajdhani',sans-serif;line-height:1.2;font-weight:400}.lime{background:#24272e;color:#fff}.lime:hover{background:#F18129}.footer-brand{font-size:22px}.footer-parent,footer{color:#8a919f}.footer-brand .brand-light{margin-left:3px}.dialog-note{background:#fcf4ed}dialog{background:#fff;border-color:#f0e8e1}dialog::backdrop{background:#3f291765}button:focus-visible,a:focus-visible{outline-color:#F18129}::selection{background:#ffebdc}@keyframes field-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero{padding-top:100px}.particle-scene{height:320px}}
@media(max-width:1100px){.hero h1{font-size:85px;letter-spacing:-4.5px}.discipline-strip .wrap{gap:16px}.intro h2{font-size:38px}.section-heading h2{font-size:40px}.card-body{padding:19px}.card-body h3{font-size:17px}.contact{padding:45px}}
@media(max-width:760px){.header{height:82px}.header-cta{font-size:11px;padding:10px 15px}.brand{font-size:23px}.brand-icon{font-size:35px;width:30px}.hero{padding-top:51px}.hero h1{font-size:clamp(43px,8.6vw,65px);letter-spacing:-2.5px;line-height:1.09;margin-bottom:25px}.hero-badge{font-size:8px;margin-bottom:25px}.hero-description{font-size:14px;line-height:1.8;max-width:450px}.hero-description br{display:none}.hero-actions{gap:9px}.hero-actions .button{font-size:10px;padding:12px 16px;gap:12px;min-height:46px}.particle-scene{height:210px;margin-top:0}.particle-scene img{width:900px;max-width:none;left:50%;transform:translateX(-50%);animation:none}.scene-caption{left:20px;font-size:6px}.scene-coordinate{right:20px;font-size:6px}.discipline-strip p{font-size:10px;gap:9px 14px}.section{padding-block:62px}.intro{grid-template-columns:1fr}.intro h2{font-size:33px}.intro-columns{gap:22px}.section-heading h2{font-size:36px}.section-heading>p{font-size:12px}.filters{gap:3px}.filter{padding:9px 11px;font-size:10px}.project-toolbar{margin-top:27px;margin-bottom:24px}.card-body{padding:24px}.card-body h3{font-size:21px}.project-art{height:230px}.contact{padding:31px 25px;gap:22px}.contact h2{font-size:36px;letter-spacing:-1.7px}.contact-asterisk{font-size:74px}.contact-side{justify-content:space-between}.contact .button{min-width:180px}.footer-brand{font-size:21px}.footer-parent{font-size:8px;margin-left:16px}}
@media(max-width:380px){.hero-actions{flex-direction:column;align-items:center}.hero-actions .button{min-width:220px}.intro-columns{grid-template-columns:1fr}.filters{flex-wrap:wrap}.contact-side{gap:10px}.contact .button{min-width:0}}

/* Oversized signature anchors the bottom of the page. */
.site-footer{display:block;padding-top:38px;padding-bottom:0;margin-top:24px;overflow:hidden}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.footer-wordmark{display:block;white-space:nowrap;font-family:'Rajdhani',sans-serif;font-size:clamp(42px,14.2vw,193px);font-weight:650;letter-spacing:-.075em;line-height:.8;margin-top:28px;padding:0;color:var(--accent);text-align:center;user-select:none;transform:translateY(.12em)}
.footer-wordmark span{font-weight:400}
.dark:hover,.lime:hover{color:#202127}
@media(max-width:760px){.site-footer{padding-top:18px;margin-top:18px}.footer-top{flex-wrap:wrap;gap:18px;padding-bottom:24px}.footer-wordmark{font-size:14vw;margin-top:24px;padding:0;letter-spacing:-.08em}.footer-top .footer-brand{width:100%}}

/* Original Bioprox Labs identity, preserving the SVG aspect ratio. */
.brand-logo{display:block;width:190px;height:auto;flex-shrink:0}
.footer-brand .brand-logo{width:165px}
@media(max-width:760px){.brand-logo{width:155px}.footer-brand .brand-logo{width:145px}}
@media(max-width:380px){.header{gap:15px}.brand-logo{width:135px}}

/* Motion is decorative; layout and accessible text remain stable. */
.hero.wrap{max-width:none;width:100%}
.particle-scene>img{width:100%;left:0;transform:none;object-fit:fill;animation:none}
.typing-letter{visibility:hidden;position:relative}
.typing-letter.is-typed{visibility:visible}
.typing-current::after{content:'';position:absolute;right:-.045em;top:.12em;width:2px;height:.85em;background:var(--accent)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,70%),#F1812914,transparent 75%);opacity:0;transition:opacity .6s ease}
.hero.pointer-active::before{opacity:1}
.interactive-particles{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.has-interactive-particles .interactive-particles{display:block}
.has-interactive-particles>img{visibility:hidden}
@media(prefers-reduced-motion:reduce){.typing-letter{visibility:visible}.typing-current::after,.hero::before,.interactive-particles{display:none!important}.has-interactive-particles>img{visibility:visible}}

/* Readable scale for Rajdhani's narrow letterforms. */
body{font-size:18px;font-weight:500;line-height:1.6}
.header nav{font-size:19px;font-weight:600;gap:28px;color:#454b56}
.header-cta{font-size:18px;font-weight:600;white-space:nowrap}
.header nav a{padding-block:10px}
.button,.hero-actions .button,.contact .button{font-size:18px;font-weight:600;line-height:1.3}
.hero-description{font-size:22px;line-height:1.6;max-width:710px;color:#606672}
.eyebrow,.hero-badge,.contact .eyebrow,dialog .eyebrow{font-size:14px;letter-spacing:1.1px;font-weight:600;color:#626b78}
.hero h1{letter-spacing:-.035em}
.intro h2,.section-heading h2,.contact h2{letter-spacing:-.025em}
.intro-columns p,.steps p,.section-heading>p,.card-body p,.contact p:not(.eyebrow),dialog p{font-size:18px;line-height:1.7;color:#606672}
.card-body h3,.steps h3{font-size:26px;line-height:1.25;font-weight:600;letter-spacing:-.3px}
.card-body{display:flex;flex-direction:column;flex:1}
.project-card:not([hidden]){display:flex;flex-direction:column}
.project-art{flex-shrink:0}
.card-body p{min-height:0}
.project-link{margin-top:auto;font-size:18px;font-weight:600}
.filters{flex-wrap:wrap}
.filter{font-size:17px;font-weight:600;line-height:1.4}
.filter span,.card-meta,.card-meta span,.catalog-note,.project-disclaimer{font-size:14px}
.card-meta{gap:12px;letter-spacing:.6px;flex-wrap:wrap}
.card-meta span{padding:3px 9px}
.filter.active,.filter.active span{color:#9e4c10}
.catalog-note,.project-disclaimer{color:#656d79}
.art-tag,.art-number{font-size:12px;letter-spacing:.8px;color:#626d7e}
.mini-top span{font-size:9px;letter-spacing:.4px;color:#746454}
.flow-caption{font-size:11px;letter-spacing:.5px;color:#746454}
.step-number{font-size:16px;color:#736353}
.discipline-strip .wrap{flex-wrap:wrap}
.discipline-strip span{font-size:13px;font-weight:600}
.discipline-strip p{font-size:17px;flex-wrap:wrap;gap:14px 22px}
.scene-caption,.scene-coordinate{font-size:12px;letter-spacing:.8px;color:#626b78}
.site-footer,.footer-parent{font-size:15px;color:#626b78}
.footer-parent{line-height:1.4}
.footer-top{flex-wrap:wrap}
/* Lower the decorative letters into the clipped footer edge for a skyline finish. */
.footer-wordmark{line-height:.8}
@media(min-width:761px) and (max-width:1000px){
  .header{height:auto;min-height:96px;flex-wrap:wrap;padding-block:20px;gap:12px 24px}
  .header nav{order:3;width:100%;justify-content:center;gap:32px}
}
@media(max-width:760px){
  .header-cta{font-size:16px;padding:10px 14px}
  .hero-description{font-size:20px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions .button,.contact .button{font-size:17px;padding:14px 19px}
  .eyebrow,.hero-badge,.contact .eyebrow,dialog .eyebrow{font-size:13px;letter-spacing:.8px}
  .intro-columns{grid-template-columns:1fr}
  .filter{font-size:16px;padding:10px 13px}
  .filters{gap:7px}
  .discipline-strip p{font-size:16px}
  .scene-caption,.scene-coordinate{font-size:10px;letter-spacing:.4px}
  .contact-side{flex-wrap:wrap}
  .footer-parent{font-size:14px}
}
@media(max-width:380px){
  .header{gap:10px}
  .header-cta{padding:10px;font-size:15px}
  .header-cta span{margin-left:5px}
  .steps{grid-template-columns:1fr}
  .footer-top .footer-brand{flex-wrap:wrap;gap:12px}
  .footer-parent{margin-left:0}
}

/* Project catalogue: one featured exploration and two complementary lines. */
[hidden]{display:none!important}
.projects-section .section-heading{align-items:center}
.projects-section .section-heading>p{max-width:330px}
.project-toolbar{gap:18px;flex-wrap:wrap}
.catalog-note{display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.filter{min-height:44px}
.filter.active{background:#24272e;color:#fff}
.filter.active span{color:#ffc89f}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.project-card{border-radius:18px;min-width:0}
.project-card:hover{transform:translateY(-3px);border-color:#d9b79d}
.project-card:focus-within{border-color:var(--accent)}
.project-card.project-featured{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr}
.project-featured .project-art{height:auto;min-height:420px;border-bottom:0;border-right:1px solid #efe8e3}
.project-art{height:255px}
.project-art .art-tag{left:25px;top:22px;font-weight:600;letter-spacing:1.3px}
.project-art .art-number{right:25px;bottom:18px;font-size:11px}
.card-body{padding:30px}
.project-featured .card-body{padding:38px}
.card-meta{margin-bottom:23px;gap:10px}
.card-meta .project-category{border:0;padding:0;border-radius:0;font-size:12px;letter-spacing:1px;color:#555e6c}
.card-meta .project-stage{display:inline-flex;align-items:center;gap:6px;background:#faf7f3;color:#685442;border-color:#eee2d8;font-size:13px;white-space:nowrap}
.project-stage i{width:5px;height:5px;background:#b97742;border-radius:50%}
.featured-label{font-size:11px!important;letter-spacing:1.5px;font-weight:600;margin-bottom:10px!important;color:#9e4c10!important}
.project-featured h3{font-size:clamp(32px,3.2vw,46px);line-height:1.08;letter-spacing:-1px;margin-bottom:18px}
.card-body p{margin-bottom:22px}
.project-topics{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 26px}
.project-topics li{font-size:13px;color:#616875;padding:4px 10px;background:#f6f6f7;border-radius:5px}
.project-link{min-height:52px;border-top-color:#e9e7e5;padding-top:15px;gap:18px}
.project-link>span{display:grid;place-items:center;width:32px;height:32px;background:#fff2e7;border-radius:50%;color:#a95416;flex-shrink:0;transition:background .2s,transform .2s}
.project-link:hover>span{background:#ffddc1;transform:rotate(45deg)}
.commerce-preview{width:82%;max-width:460px;transform:rotate(-4deg);border:1px solid #e7d8cd;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 24px 45px #9a60301c;transition:transform .3s}
.project-featured:hover .commerce-preview{transform:rotate(-2deg) translateY(-3px)}
.preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;border-bottom:1px solid #eee8e3;color:#7f7166;font-size:11px}
.preview-dots{font-size:8px;letter-spacing:2px;color:#ddc3af;white-space:nowrap}
.preview-content{display:flex;min-height:260px}
.preview-sidebar{display:flex;flex-direction:column;align-items:center;gap:17px;width:52px;padding:18px 12px;background:#fcfaf8;border-right:1px solid #f0e9e3;flex-shrink:0}
.preview-sidebar b{color:#dd7423;font-size:24px;font-weight:700;line-height:1;margin-bottom:12px}
.preview-sidebar>span{width:19px;height:5px;background:#e6e1dd;border-radius:3px}
.preview-sidebar>.selected{background:#eea065}
.preview-dashboard{flex:1;padding:25px 18px;min-width:0}
.preview-kicker{display:block;font-size:10px;letter-spacing:1px;color:#7c7168}
.preview-dashboard>strong{display:block;font-size:34px;font-weight:600;letter-spacing:-1px;margin:4px 0 13px;line-height:1.2}
.preview-modules{display:flex;align-items:center;gap:12px}
.preview-modules>div{display:flex;flex:1;flex-direction:column;align-items:center;border:1px solid #eee7e1;border-radius:9px;background:#fcfaf8;padding:10px 8px;font-size:13px;white-space:nowrap}
.preview-modules>div>span{font-size:31px;line-height:1.3;color:#a78870}
.preview-modules>i{font-style:normal;color:#bb9678}
.preview-modules>.preview-addon{background:#fff0e4;border-color:#f4cbaa;color:#9e4c10}
.preview-modules>.preview-addon>span{color:#e37c2b}
.preview-bottom{display:flex;align-items:center;gap:7px;font-size:12px;color:#766c64;margin-top:18px}
.art-automation{background-color:#f0f1f7;background-image:radial-gradient(#b1b6cd40 .7px,transparent .7px)}
.art-automation .flow-node{color:#777b99;background:#fff;border-color:#e1e3ee;width:60px;height:60px}
.art-automation .main-node{color:#fff;background:#777b99;width:78px;height:78px}
.art-automation .flow>span{background:#b1b6cd;width:42px}
.art-automation .flow-caption{color:#626780;bottom:43px;font-size:12px}
.art-research{background-color:#f1f3ef;background-image:radial-gradient(#a3b39e40 .7px,transparent .7px)}
.art-research .research-orbit div{border-color:#9aa88e}
.art-research .research-orbit span{color:#7b8e6b;background:#f1f3ef}
.project-footnote{display:flex;align-items:flex-start;gap:16px;margin-top:28px;padding:22px 0 0;border-top:1px solid #e9e1da}
.footnote-icon{font-size:24px;color:#b16a35;line-height:1.3}
.project-footnote p{margin:0;max-width:820px;color:#656d79;font-size:15px;line-height:1.65}
.project-footnote strong{color:#353b45;font-weight:600}
.dialog-exploration{margin-block:24px}
.dialog-exploration h3{font-size:21px}
.dialog-exploration ul{padding-left:22px;color:#606672;font-size:17px;line-height:1.6}
.dialog-exploration li+li{margin-top:9px}
dialog{max-height:calc(100dvh - 40px);overflow:auto}
.dialog-close{width:44px;height:44px;right:7px;top:4px;line-height:1}
@media(max-width:1000px){
  .project-featured .card-body{padding:27px}
  .project-card.project-featured{grid-template-columns:1fr 1fr}
  .commerce-preview{width:88%}
  .preview-content{min-height:240px}
  .preview-sidebar{width:38px;padding-inline:8px}
  .preview-dashboard{padding:22px 12px}
  .preview-top{font-size:10px;padding:12px 9px}
  .preview-modules{gap:8px}
  .preview-modules>div{font-size:12px}
}
@media(max-width:760px){
  .project-grid{grid-template-columns:1fr;gap:22px}
  .project-card.project-featured{display:flex}
  .project-featured .project-art{height:310px;min-height:0;border-right:0;border-bottom:1px solid #efe8e3}
  .project-featured .card-body,.card-body{padding:25px}
  .project-featured h3{font-size:36px}
  .project-toolbar{flex-direction:row;align-items:center;gap:14px}
  .filters{gap:5px}
  .filter{font-size:15px;padding:10px 12px}
  .catalog-note{font-size:13px}
  .commerce-preview{width:82%;max-width:370px;margin-top:10px}
  .preview-content{min-height:205px}
  .preview-dashboard{padding:14px}
  .preview-dashboard>strong{font-size:28px}
  .preview-bottom{margin-top:12px;font-size:11px}
  .preview-modules>div{padding:7px}
  .preview-top{padding:9px 12px}
  .project-art .art-tag{top:16px;left:20px;font-size:11px}
  .project-art .art-number{right:20px;bottom:12px;font-size:10px}
  .project-footnote{gap:12px}
}

/* The existing interactive current sits behind the complete hero content. */
.hero.wrap{isolation:isolate;padding-bottom:110px}
.hero .particle-scene{position:absolute;inset:0;z-index:0;height:auto;margin:0;pointer-events:none}
.hero::before{z-index:0}
.hero .hero-copy{position:relative;z-index:1}
.hero .interactive-particles,.hero .particle-scene>img{opacity:.65}
.hero h1,.hero-description{text-shadow:0 2px 12px #fff,0 0 28px #ffffffb3}
.hero-badge{background:#ffffffd9}
@media(max-width:760px){
  .hero.wrap{padding-bottom:88px}
  .hero .interactive-particles,.hero .particle-scene>img{opacity:.5}
}

/* Contact action: visible feedback for mouse, keyboard and touch. */
.header-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.header-cta .contact-icon{flex-shrink:0;transition:transform .2s ease}
.header-cta:focus-visible{background:var(--accent);border-color:var(--accent);color:#202127;box-shadow:0 5px 16px #F1812926}
@media(hover:hover){
  .header-cta:hover{background:var(--accent);border-color:var(--accent);color:#202127;transform:translateY(-2px);box-shadow:0 5px 16px #F1812926}
  .header-cta:hover .contact-icon{transform:rotate(-8deg)}
}
.header-cta:active{background:var(--accent);border-color:var(--accent);color:#202127;transform:translateY(0);box-shadow:none}
@media(max-width:380px){.header-cta{gap:7px}}
@media(prefers-reduced-motion:reduce){.header-cta:hover,.header-cta:hover .contact-icon{transform:none}}

/* Floating header bar: one translucent container for brand, sections and the style switch.
   It gains a soft shadow once the hero mark has scrolled away. */
html{scroll-padding-top:110px}
.site-header{position:sticky;top:12px;z-index:50;margin-top:12px}
.header-bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:68px;padding:10px 10px 10px 22px;background:#ffffffdb;border:1px solid #e3e5ea;border-radius:18px;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:box-shadow .3s,border-color .3s}
.site-header.is-scrolled .header-bar{border-color:#dcdfe5;box-shadow:0 8px 28px #2021270f}
.header-brand{justify-self:start;display:flex;align-items:center}
.header-brand .brand-logo{width:196px;height:auto}
.site-nav{display:flex;align-items:center;gap:4px;font-size:18px;font-weight:600;color:#454b56}
.site-nav a{padding:8px 14px;border-radius:30px;transition:background .2s,color .2s}
.site-nav a:hover{background:#f6f1ed;color:var(--accent)}
.header-actions{justify-self:end}
.menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #e1e3e9;border-radius:50%;background:#fff;color:#454b56;cursor:pointer}
.menu-toggle[hidden],.menu-toggle .menu-close,.menu-open .menu-toggle .menu-lines{display:none}
.menu-open .menu-toggle .menu-close{display:inline}

/* Hero: the Bioprox isotype crowns the lab badge; no duplicated navigation. */
.hero{padding-top:64px}
.hero-mark{display:block;width:clamp(72px,7vw,96px);height:auto;margin:0 auto 22px}
.hero h1,.hero-description{cursor:default;-webkit-user-select:none;user-select:none}

@media(min-width:761px){.menu-toggle{display:none}}
@media(max-width:760px){
  .header-bar{grid-template-columns:1fr auto;min-height:60px;padding:8px 8px 8px 16px;border-radius:16px}
  .header-brand .brand-logo{width:150px}
  .site-nav{grid-column:1/-1;flex-wrap:wrap;justify-content:center}
  .js .site-nav{grid-column:auto;position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:#fff;border:1px solid #e3e5ea;border-radius:16px;box-shadow:0 16px 36px #2021271f}
  .js .menu-open .site-nav{display:flex}
  .js .site-nav a{padding:12px 14px;font-size:19px;border-radius:10px}
  .hero{padding-top:40px}
  .hero-mark{width:68px;margin-bottom:18px}
}

/* Footer: the one dark surface, closing the page. Isotype and a two-line legal
   block sit tight on the left; the way back up stays on the right. */
.site-footer{position:relative;margin-top:0;padding-top:0;padding-bottom:40px;background:#0C1B1F;color:#9FB0AD;overflow:visible;display:flow-root}
.site-footer a{color:#DDE6E3}
.site-footer a:hover{color:var(--accent)}
.footer-top{justify-content:flex-start;gap:14px;border-bottom-color:#FFFFFF1F}
.footer-mark{display:flex;flex-shrink:0}
.footer-mark img{width:40px;height:auto}
.footer-legal{margin:0;font-size:16px;line-height:1.45;color:#9FB0AD;text-align:left}
.footer-legal>span:first-child{color:#F4F8F6;font-weight:600}
.footer-sep{display:none}
.footer-dept{display:block}
.footer-top-link{margin-left:auto;white-space:nowrap}
@media(max-width:760px){
  .site-footer{padding-bottom:28px}
  .footer-top{flex-wrap:nowrap;align-items:center;gap:12px}
  .footer-mark img{width:34px}
  .footer-legal{font-size:15px}
  .footer-top-link{display:none}
}

/* Contact illustration: two speech bubbles balance the text on the left. */
.contact-art{display:block;width:150px;margin-bottom:22px}
.contact-art svg{width:100%;height:auto}
@media(max-width:760px){.contact-art{width:92px;margin-bottom:0}}

/* Contact band: light paper like Projects, so the page alternates white and paper
   up to the dark footer; the warm contact card still stands out on it. */
@media(max-width:360px){.header-bar{gap:10px;padding-left:12px}.header-brand .brand-logo{width:118px}}

/* Skyline: BIOPROX, centred, with a smaller [LABS] beside it (public/skyline.svg),
   stands on the footer's top edge and sinks a little below it, so the letters rise
   out of the dark band like buildings against the light paper above. Percentage
   margins are relative to the skyline width; clip-path hides the sunken part. */
:root{--skyline-w:min(calc(100vw - 40px),1100px)}
/* A thin orange horizon runs along the footer edge, behind the skyline letters. */
.site-footer{border-top:3px solid var(--accent)}
.footer-skyline{position:relative;z-index:1;width:var(--skyline-w);margin:0 auto}
.footer-skyline img{display:block;width:100%;height:auto;margin-top:-14.3%;clip-path:inset(0 0 10% 0)}
.footer-skyline img.pixel-only{margin-top:-14.375%;clip-path:inset(0 0 8% 0)}
.contact-section{padding-bottom:calc(var(--skyline-w) * .143)}
.site-footer .footer-top{padding-top:8px;padding-bottom:0;border-bottom:0}
@media(max-width:760px){
  .contact-section{padding-bottom:calc(var(--skyline-w) * .143)}
  .site-footer .footer-top{padding-top:4px}
}

/* Contact email inside the dialog note. */
.dialog-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.dialog-addons{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dialog-addons code{display:inline-block;padding:4px 10px;border:1px solid #E7D3C2;border-radius:4px;background:#fff;color:#2B2F33;font-size:15px}
.dialog-projects{list-style:none;margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:#fff;border-radius:2px}
.dialog-projects strong{color:#2B2F33}

/* Language switch: plain EN | ES text buttons, the active language in ink. */
.lang-switch{display:flex;align-items:center;gap:2px;font:600 15px/1 'Rajdhani',sans-serif;color:#9aa0ab}
.lang-switch[hidden]{display:none}
.lang-switch button{padding:8px 5px;border:0;background:none;color:inherit;font:inherit;letter-spacing:.6px;cursor:pointer;transition:color .2s}
.lang-switch button:hover{color:var(--accent)}
.lang-switch button[aria-pressed="true"]{color:#202127}
.lang-switch>span{color:#d3d6dc}
.header-actions{gap:12px}
.site-nav .lang-switch--menu{display:none}
@media(max-width:760px){
  .header-actions>.lang-switch{display:none}
  .js .site-nav .lang-switch--menu:not([hidden]){display:flex;margin-top:6px;padding:10px 9px 4px;border-top:1px solid #e3e5ea;font-size:17px}
}


/* ==========================================================================
   Brand colour treatment and the «Cómo trabajamos» section (formerly color-theme.css)
   ========================================================================== */
/* Corporate palette. The supplied #0C1B!F is interpreted as #0C1B1F. */
:root {
  --brand-orange: #F18129;
  --brand-gold: #F9B41E;
  --brand-deep: #0C1B1F;
  --brand-teal: #147D83;
  --brand-mint: #9CE5CE;
  --brand-gradient: linear-gradient(120deg, var(--brand-orange), var(--brand-gold));
}

/* Warm colour field and a diagonal ribbon frame the catalogue. */
.projects-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 100% 8%, #f9b41e35, transparent 43%),
    radial-gradient(ellipse at 0% 58%, #f181291c, transparent 48%),
    #fff9f0;
}
.projects-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: -5%;
  width: 61%;
  height: 12px;
  transform: skewX(-35deg);
  background: var(--brand-gradient);
}
.projects-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 430px;
  left: -10%;
  width: 120%;
  height: 380px;
  transform: skewY(-9deg);
  background: linear-gradient(100deg, #f1812926, #f9b41e46 60%, #ffdc8120);
  pointer-events: none;
}
.projects-section .section-heading .eyebrow { color: #98430F; }
.projects-section .section-heading h2 { color: var(--brand-deep); }
.projects-section .section-heading .muted { color: #a64913; }
.projects-section .section-heading > p { color: #5d625d; }
.project-toolbar { border-bottom-color: #d7b89280; }
.filter { color: #4e514b; }
.filter span { color: #6c6353; }
.filter.active { background: var(--brand-deep); color: #fff; box-shadow: 0 5px 14px #0c1b1f16; }
.filter.active span { color: #ffd47e; }
.filter:hover:not(.active) { background: #f9b41e35; }
.project-card { border-color: #e9dac8; box-shadow: 0 10px 28px #6437190a; }
.project-card:hover { border-color: #dfaf71; box-shadow: 0 20px 44px #64371917; }
.project-card .card-body { background: linear-gradient(145deg, #fff, #fffcf7); }
.project-featured .project-art { border: 0; }
.project-art { isolation: isolate; border: 0; }
.project-art::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 140%;
  height: 43%;
  left: -20%;
  top: 20%;
  transform: rotate(-18deg);
  background: #ffffff20;
  border-block: 1px solid #ffffff25;
  pointer-events: none;
}
.project-art::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  right: -110px;
  top: -130px;
  box-shadow: 0 0 0 35px #ffffff0d, 0 0 0 70px #ffffff0a;
  pointer-events: none;
}
.art-commerce {
  background:
    radial-gradient(ellipse at 90% 5%, #ffe99b 0%, transparent 45%),
    linear-gradient(125deg, var(--brand-orange) 4%, var(--brand-gold) 80%);
}
.art-commerce .art-tag, .art-commerce .art-number { color: #55310c; }
.commerce-preview {
  border-color: #ffffffb3;
  box-shadow: 0 28px 55px #83421330, 0 3px 10px #83421318;
}
.preview-sidebar { background: var(--brand-deep); border-color: var(--brand-deep); }
.preview-sidebar b { color: var(--brand-gold); }
.preview-sidebar > span { background: #476064; }
.preview-sidebar > .selected { background: var(--brand-orange); }
.preview-modules > .preview-addon { background: var(--brand-gradient); border-color: #f2a535; color: #542b0a; }
.preview-modules > .preview-addon > span { color: #542b0a; }
.project-link { color: var(--brand-deep); }
.project-link > span { background: var(--brand-gradient); color: var(--brand-deep); }
.project-link:hover { color: #a64913; }
.project-link:hover > span { background: var(--brand-gold); }
.project-featured .project-topics li { background: #fff0d4; color: #765014; }
.art-automation {
  background:
    radial-gradient(ellipse at 0 0, #42bcae 0%, transparent 65%),
    linear-gradient(125deg, #147d83, #15515e 85%);
}
.art-automation .art-tag, .art-automation .art-number, .art-automation .flow-caption { color: #e0fff5; }
.art-automation .flow-node { background: #f0fff9; color: #175962; border-color: #b7f0df; box-shadow: 0 10px 22px #042f3b33; }
.art-automation .main-node { color: var(--brand-deep); background: var(--brand-gradient); border-color: #ffcf6b; box-shadow: 0 10px 28px #052d3b55; }
.art-automation .flow > span { background: #aeecda; }
.project-card:has(.art-automation) .project-topics li { background: #e5f6ef; color: #235f5b; }
.project-card:has(.art-automation) .project-link > span { background: #c3eddf; color: #145b58; }
.art-research {
  background:
    radial-gradient(ellipse at 15% 90%, #ed9155 0%, transparent 65%),
    linear-gradient(120deg, #ffe096, #f9b41e 70%);
}
.art-research .art-tag, .art-research .art-number { color: #593c12; }
.art-research .research-orbit { transform: rotate(-12deg); }
.art-research .research-orbit div { border-color: #82562f; width: 185px; height: 91px; }
.art-research .research-orbit span { display: grid; place-items: center; width: 76px; height: 76px; color: #ffce65; background: var(--brand-deep); box-shadow: 0 12px 30px #89512230; }
.project-card:has(.art-research) .project-topics li { background: #fff3cf; color: #775416; }
.project-footnote { border-top-color: #d7b89280; }
.footnote-icon { color: #9c4a12; }

/* Process chapter: a subtle light band, so the only dark surface is the footer at the end. */
.approach-section {
  position: relative;
  background: #fff;
  color: #202127;
  border-top: 1px solid #E4E8E5;
}
.approach .section-heading { align-items: center; }
.approach .eyebrow { color: #6E7D76; }
.approach .section-heading h2 { color: #2B2F33; }
.approach .section-heading h2 > span { color: #6E7D76; }
.approach .section-heading > p { color: #4A5350; max-width: 350px; }
.approach .steps { gap: 18px; position: relative; margin-top: 52px; }
.approach .steps article {
  --step-accent: #F18129;
  position: relative;
  min-width: 0;
  padding: 26px 23px 28px;
  border: 1px solid #CDD5D0;
  border-top: 3px solid var(--step-accent);
  border-radius: 2px;
  background: #FCFCFA;
  transition: border-color .2s;
}
.approach .steps article:nth-child(2) { --step-accent: #E0A10E; }
.approach .steps article:nth-child(3) { --step-accent: #147D83; }
.approach .steps article:nth-child(4) { --step-accent: #4A78B5; }
.approach .steps article:hover { border-color: #2B2F33; border-top-color: var(--step-accent); }
.approach .step-number { align-items: center; color: var(--step-accent); font-size: 37px; font-weight: 500; border-bottom-color: #E4E8E5; padding-bottom: 20px; margin-bottom: 22px; line-height: 1; }
.approach .step-number > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 21px; color: var(--step-accent); background: #F4F5F1; }
.approach .steps h3 { color: #2B2F33; font-size: 25px; }
.approach .steps p { color: #4A5350; font-size: 17px; }
.approach-signature { display: flex; align-items: center; gap: 24px; margin-top: 42px; color: #6E7D76; font-size: 11px; letter-spacing: 1.4px; }
.signature-line { flex: 1; height: 1px; background: #CDD5D0; }

@media (max-width: 1100px) {
  .approach .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .projects-section::before { width: 75%; height: 8px; }
  .projects-section::after { top: 430px; height: 260px; }
  .approach .steps { gap: 16px; margin-top: 32px; }
  .approach .steps article { padding: 23px 19px; }
  .approach-signature { flex-wrap: wrap; gap: 14px; font-size: 10px; }
  .approach-signature > span:first-child { width: 100%; }
}
@media (max-width: 480px) {
  .approach .steps { grid-template-columns: 1fr; }
  .approach .step-number { font-size: 32px; margin-bottom: 18px; padding-bottom: 16px; }
}
@media (forced-colors: active) {
  .project-art, .approach-section, .approach .steps article { border: 1px solid CanvasText; }
}


/* ==========================================================================
   Projects: contemporary engineering drawings (formerly blueprint.css)
   ========================================================================== */
/* Project sheets as contemporary engineering drawings.
   Light paper, graphite and grey-green line work, and a subtle technical grid.
   Orange #F18129 is reserved for connections, highlighted points and actions. */
:root {
  --bp-paper: #F4F5F1;
  --bp-sheet: #FCFCFA;
  --bp-graphite: #2B2F33;
  --bp-sage: #6E7D76;
  --bp-sage-light: #A9B6AF;
  --bp-grid: #E4E9E5;
  --bp-border: #CDD5D0;
  --bp-text: #4A5350;
  --bp-orange: #F18129;
}

.drawing-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Section: flat light paper, no ribbons or washes. */
.projects-section { background: var(--bp-paper); }
.projects-section::before,
.projects-section::after { display: none; }
.projects-section .section-heading .eyebrow { color: var(--bp-sage); }
.projects-section .section-heading h2 { color: var(--bp-graphite); }
.projects-section .section-heading .muted { color: var(--bp-sage); }
.projects-section .section-heading > p { color: var(--bp-text); }
.projects-section .project-toolbar { border-bottom-color: var(--bp-border); }
.projects-section .filter.active { background: var(--bp-graphite); color: #fff; box-shadow: none; }
.projects-section .filter.active span { color: var(--bp-orange); }
.projects-section .filter:hover:not(.active) { background: #E9EDEA; }

/* Sheet: thin border, near-square corners, no depth. */
.projects-section .project-card {
  background: var(--bp-sheet);
  border: 1px solid var(--bp-border);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color .2s;
}
.projects-section .project-card:hover { transform: none; box-shadow: none; border-color: var(--bp-graphite); }
.projects-section .project-card:focus-within { border-color: var(--bp-orange); }
.projects-section .project-card.project-featured { grid-template-areas: "art body" "block block"; grid-template-rows: 1fr auto; }
.projects-section .project-featured .project-art { grid-area: art; }
.projects-section .project-featured .card-body { grid-area: body; }
.projects-section .project-featured .title-block { grid-area: block; }

/* Drawing field with the technical grid: 10 px minor, 50 px major. */
.projects-section .project-art,
.projects-section .project-featured .project-art {
  padding: 22px;
  border: 0;
  border-bottom: 1px solid var(--bp-border);
  background-color: var(--bp-sheet);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
    linear-gradient(#EEF1EE 1px, transparent 1px),
    linear-gradient(90deg, #EEF1EE 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
}
.projects-section .project-featured .project-art { border-bottom: 0; border-right: 1px solid var(--bp-border); }
.projects-section .project-art::before,
.projects-section .project-art::after { display: none; }

/* Line language: object, thin, hidden, construction, axis, dimension, connection. */
.drawing { width: 100%; height: 100%; overflow: visible; }
.drawing .ln { fill: none; stroke: var(--bp-graphite); stroke-width: 1.8; stroke-linejoin: round; }
.drawing .thin-ln { stroke-width: 1.2; }
.drawing .thin { fill: none; stroke: var(--bp-sage); stroke-width: 1; }
.drawing .hidden-ln { fill: none; stroke: var(--bp-sage); stroke-width: 1.1; stroke-dasharray: 6 4; }
.drawing .cons { fill: none; stroke: var(--bp-sage-light); stroke-width: .6; stroke-dasharray: 2 3; }
.drawing .axis { fill: none; stroke: var(--bp-sage-light); stroke-width: .8; stroke-dasharray: 18 4 2 4; }
.drawing .dim { fill: none; stroke: var(--bp-sage); stroke-width: .9; }
.drawing .ext { fill: none; stroke: var(--bp-sage); stroke-width: .6; }
.drawing .conn { fill: none; stroke: var(--bp-orange); stroke-width: 1.6; }
.drawing .conn.dashed { stroke-width: 1.2; stroke-dasharray: 5 4; }
.drawing .detail { fill: none; stroke: var(--bp-orange); stroke-width: 1.1; stroke-dasharray: 9 5; }
.drawing .pt { fill: var(--bp-orange); }
.drawing .pt-lg { fill: var(--bp-sheet); stroke: var(--bp-orange); stroke-width: 2.5; }
.drawing text { font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.drawing .view { fill: var(--bp-sage); font-size: 13px; letter-spacing: .4px; }
.drawing .lbl { fill: var(--bp-graphite); font-size: 14px; text-anchor: middle; }
.drawing .start { text-anchor: start; }
.drawing .lbl-lg { font-size: 22px; font-weight: 500; }
.drawing .dim-t { fill: var(--bp-sage); font-size: 13px; text-anchor: middle; }

/* Description: large titles, readable body, quiet tags, orange action. */
.projects-section .project-card .card-body { background: none; padding: 32px; }
.projects-section .project-featured .card-body { padding: 44px 44px 36px; justify-content: center; }
.projects-section .card-meta { justify-content: space-between; margin-bottom: 20px; }
.projects-section .card-meta .project-category { color: var(--bp-sage); font-size: 13px; letter-spacing: 1.2px; }
.projects-section .card-meta .project-stage { background: none; border: 1px solid var(--bp-border); border-radius: 2px; color: var(--bp-graphite); font-size: 14px; }
.projects-section .project-stage i { background: var(--bp-orange); border-radius: 0; width: 6px; height: 6px; }
.projects-section .project-card h3 { color: var(--bp-graphite); font-size: 32px; line-height: 1.12; letter-spacing: -.4px; margin-bottom: 14px; }
.projects-section .project-featured h3 { font-size: clamp(38px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -1px; margin-bottom: 18px; }
.projects-section .project-card .card-body p { color: var(--bp-text); font-size: 18px; line-height: 1.65; max-width: 46ch; }
.projects-section .project-card .project-topics li { background: none; border: 1px solid var(--bp-border); border-radius: 2px; color: var(--bp-text); font-size: 14px; padding: 4px 10px; }
.projects-section .project-card .project-link { color: var(--bp-graphite); border-top: 1px solid var(--bp-border); }
.projects-section .project-card .project-link:hover { color: var(--bp-orange); }
.projects-section .project-card .project-link > span { background: none; border: 1px solid var(--bp-orange); border-radius: 2px; color: var(--bp-orange); }
.projects-section .project-card .project-link:hover > span { background: var(--bp-orange); color: #fff; transform: none; }

/* Title block along the bottom edge of every sheet. */
.title-block {
  display: grid;
  grid-template-columns: 1.6fr 1fr .7fr 1fr;
  margin: 0;
  border-top: 1px solid var(--bp-border);
  background: var(--bp-sheet);
}
.title-block > div { padding: 10px 16px 11px; min-width: 0; }
.title-block > div + div { border-left: 1px solid var(--bp-border); }
.title-block dt { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bp-sage); }
.title-block dd { margin: 1px 0 0; font-size: 16px; font-weight: 600; color: var(--bp-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-block .tb-state dd::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; background: var(--bp-orange); vertical-align: middle; }

@media (max-width: 760px) {
  .projects-section .project-featured .project-art { border-right: 0; border-bottom: 1px solid var(--bp-border); }
  .projects-section .project-card .card-body,
  .projects-section .project-featured .card-body { padding: 24px 22px; }
  .projects-section .project-card h3 { font-size: 28px; }
  .projects-section .project-featured h3 { font-size: 34px; }
  .projects-section .project-card .card-body p { font-size: 17px; }
  .title-block { grid-template-columns: 1fr 1fr; }
  .title-block > div:nth-child(3) { border-left: 0; }
  .title-block > div:nth-child(n+3) { border-top: 1px solid var(--bp-border); }
}

/* Pixel mode: the drawing geometry is mosaicked into 3x3 blocks by an SVG filter
   (labels stay outside it to remain legible), strokes sit just under one block wide so
   every line lands on exactly one row of samples, and every frame takes the hard ink border of the pixel style. */
[data-style="pixel"] .drawing .geo { filter: url(#bp-pixelate); }
[data-style="pixel"] .drawing .ln,
[data-style="pixel"] .drawing .thin-ln,
[data-style="pixel"] .drawing .thin,
[data-style="pixel"] .drawing .hidden-ln,
[data-style="pixel"] .drawing .dim,
[data-style="pixel"] .drawing .ext,
[data-style="pixel"] .drawing .conn,
[data-style="pixel"] .drawing .detail,
[data-style="pixel"] .drawing .pt-lg { stroke-width: 2.9; stroke-linejoin: miter; }
[data-style="pixel"] .drawing .cons { stroke-width: 2.9; stroke-dasharray: 3 6; opacity: .55; }
[data-style="pixel"] .drawing .axis { stroke-width: 2.9; stroke-dasharray: 15 6 3 6; opacity: .6; }
[data-style="pixel"] .drawing .hidden-ln { stroke-dasharray: 9 6; }
[data-style="pixel"] .drawing .conn.dashed,
[data-style="pixel"] .drawing .detail { stroke-dasharray: 9 6; }
[data-style="pixel"] .drawing text { font-family: 'Pixelify Sans', monospace; font-weight: 500; }

[data-style="pixel"] .projects-section .project-art {
  background-image:
    linear-gradient(var(--bp-grid) 2px, transparent 2px),
    linear-gradient(90deg, var(--bp-grid) 2px, transparent 2px);
  background-size: 24px 24px;
}
[data-style="pixel"] .projects-section .project-card { border: 3px solid var(--pixel-ink); box-shadow: var(--pixel-shadow); }
[data-style="pixel"] .projects-section .project-card:hover { box-shadow: 6px 6px 0 var(--pixel-ink); }
[data-style="pixel"] .projects-section .project-art { border-bottom: 3px solid var(--pixel-ink); }
[data-style="pixel"] .projects-section .project-featured .project-art { border-right: 3px solid var(--pixel-ink); }
[data-style="pixel"] .projects-section .project-card h3 { letter-spacing: 0; font-size: 24px; }
[data-style="pixel"] .projects-section .project-featured h3 { font-size: clamp(28px, 3vw, 38px); }
[data-style="pixel"] .projects-section .card-meta .project-category { border: 0; padding: 0; }
[data-style="pixel"] .projects-section .card-meta .project-stage { border: 2px solid var(--pixel-ink); box-shadow: 2px 2px 0 var(--pixel-ink); background: #fff; }
[data-style="pixel"] .projects-section .project-card .project-topics li { border: 2px solid var(--pixel-ink); color: var(--bp-graphite); background: #fff; box-shadow: 2px 2px 0 var(--pixel-ink); }
[data-style="pixel"] .projects-section .project-card .project-link { border-top: 3px dashed var(--bp-border); }
[data-style="pixel"] .projects-section .project-card .project-link > span { border: 2px solid var(--pixel-ink); background: var(--bp-orange); color: var(--pixel-ink); box-shadow: 2px 2px 0 var(--pixel-ink); }
[data-style="pixel"] .projects-section .project-card .project-link:hover > span { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--pixel-ink); background: var(--bp-orange); color: var(--pixel-ink); }
[data-style="pixel"] .title-block { border-top: 3px solid var(--pixel-ink); background: #fff; }
[data-style="pixel"] .title-block > div + div { border-left: 3px solid var(--pixel-ink); }
[data-style="pixel"] .title-block dt { letter-spacing: .5px; }
[data-style="pixel"] .title-block .tb-state dd::before { width: 8px; height: 8px; }
[data-style="pixel"] .projects-section .project-toolbar { border-bottom: 3px dashed var(--bp-border); }
@media (max-width: 760px) {
  [data-style="pixel"] .projects-section .project-featured .project-art { border-right: 0; }
  [data-style="pixel"] .title-block > div:nth-child(3) { border-left: 0; }
  [data-style="pixel"] .title-block > div:nth-child(n+3) { border-top: 3px solid var(--pixel-ink); }
}


/* ==========================================================================
   Pixel art mode and the header style switch (formerly pixel-theme.css)
   ========================================================================== */

/* Header style switch, shown only when JavaScript is available.
   An on/off switch drawn in the style it represents: smooth and OFF in the normal
   style, pixel art and ON in pixel mode. */
.header-actions { display: flex; align-items: center; gap: 10px; }
.style-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 5px 5px 5px 11px;
  border: 1px solid #e1e3e9;
  border-radius: 30px;
  background: #fff;
  color: #454b56;
  font: 600 16px/1 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: border-color .2s;
}
.style-toggle[hidden] { display: none; }
.toggle-track {
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: 15px;
  background: #ece8e4;
  transition: background .25s;
}
.toggle-track::before {
  content: 'OFF';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font: 600 11px/1 'Rajdhani', sans-serif;
  letter-spacing: .6px;
  color: #7d8494;
}
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #20212733;
  transition: transform .25s ease;
}
.toggle-icon { display: grid; transition: color .2s; }
.icon-pixel { display: none; }
.style-toggle:hover { border-color: #f3c9a6; }
.style-toggle:hover .toggle-icon { color: var(--accent); }
.style-toggle:hover .toggle-track { background: #f9dfc9; }

/* Pixel mode: notched pixel outlines drawn with stacked hard shadows. */
[data-style="pixel"] .style-toggle { padding: 6px 4px 6px 6px; border-color: transparent; background: none; }
[data-style="pixel"] .toggle-track {
  margin: 3px;
  height: 26px;
  background: var(--accent);
  box-shadow: inset 0 3px 0 #F9B41E, 0 -3px 0 var(--pixel-ink), 0 3px 0 var(--pixel-ink), -3px 0 0 var(--pixel-ink), 3px 0 0 var(--pixel-ink);
  transition: none;
}
[data-style="pixel"] .toggle-track::before { content: 'ON'; right: auto; left: 7px; font: 600 12px/1 'Pixelify Sans', monospace; color: var(--pixel-ink); }
[data-style="pixel"] .toggle-knob {
  top: 5px;
  left: 5px;
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: 0 -2px 0 var(--pixel-ink), 0 2px 0 var(--pixel-ink), -2px 0 0 var(--pixel-ink), 2px 0 0 var(--pixel-ink);
  transform: translateX(30px);
  transition: transform .2s steps(3);
}
[data-style="pixel"] .icon-smooth { display: none; }
[data-style="pixel"] .icon-pixel { display: block; }
[data-style="pixel"] .style-toggle:hover .toggle-track { background: #f59a4f; }

@media (max-width: 760px) {
  .toggle-icon { display: none; }
  .style-toggle, [data-style="pixel"] .style-toggle { padding: 4px; }
}
@media (max-width: 420px) { .header-actions { gap: 6px; } }

/* Pixel art mode: square corners, hard offset shadows, stepped motion and a bitmap font. */
[data-style="pixel"] {
  --pixel-ink: #202127;
  --pixel-shadow: 4px 4px 0 var(--pixel-ink);
}

[data-style="pixel"] body,
[data-style="pixel"] h1,
[data-style="pixel"] h2,
[data-style="pixel"] h3,
[data-style="pixel"] button,
[data-style="pixel"] .brand,
[data-style="pixel"] .eyebrow,
[data-style="pixel"] .art-tag,
[data-style="pixel"] .art-number,
[data-style="pixel"] .step-number,
[data-style="pixel"] .scene-caption,
[data-style="pixel"] .scene-coordinate,
[data-style="pixel"] .discipline-strip span,
[data-style="pixel"] .contact-asterisk,
[data-style="pixel"] .footer-wordmark {
  font-family: 'Pixelify Sans', monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
[data-style="pixel"] *,
[data-style="pixel"] *::before,
[data-style="pixel"] *::after { border-radius: 0 !important; }
[data-style="pixel"] img { image-rendering: pixelated; }
/* Logo and isotype swap to their pixel-art versions. */
.pixel-only { display: none !important; }
[data-style="pixel"] .pixel-only { display: block !important; }
[data-style="pixel"] .smooth-only { display: none !important; }

/* Pixelify is wider than Rajdhani: tighter sizes and no negative tracking. */
[data-style="pixel"] body { font-size: 16px; }
[data-style="pixel"] .hero h1 { font-size: clamp(40px, 6.2vw, 88px); letter-spacing: 0; line-height: 1.1; }
[data-style="pixel"] .intro h2,
[data-style="pixel"] .section-heading h2,
[data-style="pixel"] .contact h2 { letter-spacing: 0; font-size: clamp(30px, 3.4vw, 42px); }
[data-style="pixel"] .hero-description { font-size: 19px; }
[data-style="pixel"] .intro-columns p,
[data-style="pixel"] .steps p,
[data-style="pixel"] .section-heading > p,
[data-style="pixel"] .card-body p,
[data-style="pixel"] .contact p:not(.eyebrow),
[data-style="pixel"] dialog p { font-size: 16px; }
[data-style="pixel"] .card-body h3,
[data-style="pixel"] .steps h3 { font-size: 22px; letter-spacing: 0; }
[data-style="pixel"] .header nav,
[data-style="pixel"] .header-cta,
[data-style="pixel"] .button,
[data-style="pixel"] .project-link { font-size: 16px; }
[data-style="pixel"] .filter { font-size: 15px; }
[data-style="pixel"] .eyebrow,
[data-style="pixel"] .hero-badge { font-size: 12px; letter-spacing: 1px; }
[data-style="pixel"] .footer-wordmark { letter-spacing: 0; font-size: clamp(36px, 11vw, 150px); }

/* Chunky borders and offset shadows instead of soft depth. */
[data-style="pixel"] .button,
[data-style="pixel"] .header-cta,
[data-style="pixel"] .hero-badge,
[data-style="pixel"] .filter.active,
[data-style="pixel"] .project-card,
[data-style="pixel"] .contact,
[data-style="pixel"] dialog {
  border: 3px solid var(--pixel-ink);
  box-shadow: var(--pixel-shadow);
}
[data-style="pixel"] .button,
[data-style="pixel"] .header-cta,
[data-style="pixel"] .project-card {
  transition: transform .15s steps(2), box-shadow .15s steps(2), background .15s steps(2);
}
[data-style="pixel"] .button:hover,
[data-style="pixel"] .header-cta:hover,
[data-style="pixel"] .project-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pixel-ink); }
[data-style="pixel"] .button:active,
[data-style="pixel"] .header-cta:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--pixel-ink); }
[data-style="pixel"] .secondary { background: #fff; }
[data-style="pixel"] .project-card { border-color: var(--pixel-ink); }
[data-style="pixel"] .project-art { border-bottom: 3px solid var(--pixel-ink); }
[data-style="pixel"] .project-topics li,
[data-style="pixel"] .card-meta span { border: 2px solid currentColor; }
[data-style="pixel"] .approach .steps article { border: 3px solid var(--pixel-ink); border-top: 8px solid var(--step-accent); box-shadow: var(--pixel-shadow); }
[data-style="pixel"] .status-dot { width: 8px; height: 8px; }

/* Pixel grid texture behind the hero and a block cursor for the typewriter. */
[data-style="pixel"] .hero {
  background-image:
    linear-gradient(#20212708 1px, transparent 1px),
    linear-gradient(90deg, #20212708 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-style="pixel"] .typing-current::after { width: .45em; animation: pixel-blink 1s steps(1) infinite; }
@keyframes pixel-blink { 50% { opacity: 0; } }
[data-style="pixel"] .hero::before { display: none; }
[data-style="pixel"] ::selection { background: var(--accent); color: var(--pixel-ink); }

@media (max-width: 760px) {
  [data-style="pixel"] .hero h1 { font-size: clamp(34px, 9vw, 56px); }
  [data-style="pixel"] .button,
  [data-style="pixel"] .header-cta { font-size: 14px; }
  [data-style="pixel"] .hero-description { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-style="pixel"] .typing-current::after { animation: none; }
}

/* Header bar in pixel mode: a hard-edged panel instead of frosted glass. */
[data-style="pixel"] .header-bar { border: 3px solid var(--pixel-ink); background: #fffffff0; box-shadow: var(--pixel-shadow); }
[data-style="pixel"] .site-nav a:hover { background: var(--accent); color: var(--pixel-ink); }
[data-style="pixel"] .menu-toggle { border: 3px solid var(--pixel-ink); }
@media (max-width: 760px) {
  [data-style="pixel"] .js .site-nav, .js[data-style="pixel"] .site-nav { border: 3px solid var(--pixel-ink); box-shadow: var(--pixel-shadow); }
}

/* Footer legal line: larger, darker and slightly tracked so the bitmap font stays legible. */
[data-style="pixel"] .footer-legal { font-size: 18px; line-height: 1.55; letter-spacing: .4px; color: #B9C7C4; }
[data-style="pixel"] .footer-legal > span:first-child { color: #fff; font-weight: 500; }
[data-style="pixel"] .footer-top-link { font-size: 17px; letter-spacing: .4px; color: #fff; }
@media (max-width: 760px) {
  [data-style="pixel"] .footer-legal { font-size: 16px; }
}

/* Contact block: same legibility treatment as the hero copy. */
[data-style="pixel"] .contact .eyebrow { font-size: 14px; letter-spacing: 1px; color: #4a5160; }
[data-style="pixel"] .contact p:not(.eyebrow) { font-size: 19px; line-height: 1.6; letter-spacing: .4px; color: #3d434d; }
[data-style="pixel"] #contact-button { font-size: 17px; letter-spacing: .4px; }
@media (max-width: 760px) {
  [data-style="pixel"] .contact .eyebrow { font-size: 13px; }
  [data-style="pixel"] .contact p:not(.eyebrow) { font-size: 17px; }
}
[data-style="pixel"] .site-footer { border-top-width: 4px; }
[data-style="pixel"] .lang-switch button[aria-pressed="true"] { color: var(--pixel-ink); text-decoration: underline 3px var(--accent); text-underline-offset: 5px; }

/* Footer email: crawlable contact next to the way back up. */
.footer-mail{margin-left:auto;white-space:nowrap}
.site-footer .footer-top-link{margin-left:28px}
@media(max-width:760px){
  .site-footer .footer-top{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;align-items:center}
  .footer-mail{grid-column:2;margin:0;font-size:15px}
}

/* 03 / Contacto: the process-card layout of the former «Cómo trabajamos»,
   with three contact steps. */
.approach .steps.contact-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.contact-mail{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
@media(max-width:760px){
  .approach .steps.contact-steps{grid-template-columns:1fr}
}

/* Technology strip: a slow, endless marquee of the stack, paused on hover.
   Two identical tracks slide side by side so the loop never shows a seam. */
.tech-strip{padding-block:24px;border-block:1px solid #EEF0EC}
.tech-strip-inner{display:flex;align-items:center;gap:32px}
.tech-label{flex-shrink:0;font-size:13px;font-weight:600;letter-spacing:1.2px;color:#6E7D76}
.tech-marquee{display:flex;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tech-track{display:flex;flex-shrink:0;margin:0;padding:0;list-style:none;animation:tech-scroll 48s linear infinite}
.tech-track li{display:flex;align-items:center;white-space:nowrap;font-size:20px;font-weight:600;color:#454b56}
.tech-track li::after{content:'';width:6px;height:6px;margin:0 26px;background:var(--accent)}
.tech-marquee:hover .tech-track{animation-play-state:paused}
@keyframes tech-scroll{to{transform:translateX(-100%)}}
@media(max-width:760px){
  .tech-strip-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .tech-marquee{width:100%}
  .tech-track li{font-size:17px}
  .tech-track li::after{margin:0 18px}
}
@media(prefers-reduced-motion:reduce){
  .tech-marquee{-webkit-mask-image:none;mask-image:none}
  .tech-track{flex-wrap:wrap;flex-shrink:1;row-gap:8px}
  .tech-track[aria-hidden]{display:none}
}
[data-style="pixel"] .tech-track li{font-size:17px;letter-spacing:.4px}

/* 3D shaker dialog: a wide sheet holding the Three.js viewer iframe. */
dialog.model-dialog{width:calc(100% - 32px);max-width:960px;padding:34px}
.model-frame{height:min(68vh,620px);margin-top:18px;border:1px solid #CDD5D0;border-radius:2px;overflow:hidden;background:#fff}
.model-frame iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:760px){dialog.model-dialog{padding:26px 16px 18px}.model-frame{height:min(62vh,520px)}}
[data-style="pixel"] .model-frame{border:3px solid var(--pixel-ink)}